JavaScript: учитывая список URL-адресов изображений, как можно отобразить первое неразбитое изображение?

Question

Я получаю список URL-адресов изображений, и в настоящее время у меня есть несколько скрытых элементов img на моей странице (по одному для каждого URL-адреса в списке). Когда страница закончила загрузку, я использую JavaScript, чтобы проверить изображения и отобразить (т.е. установить myImage.style.display="inline") первое, которое не сломано. Это довольно просто. Однако, это требует, чтобы я запросил все изображения.

Я хотел бы загрузить каждое изображение по одному и определить, не сломано ли оно. Если изображение повреждено, попробуйте загрузить следующее. Если это хорошо, покажите его и проигнорируйте все остальное. (Это сэкономит ряд ненужных запросов.)

Алгоритм достаточно прост, но хитрость заключается во времени загрузки изображения. Проблема в том, что изображение может не загружаться до того, как произойдет проверка isBroken, поэтому хорошее изображение можно игнорировать. Тогда подход будет заключаться в том, чтобы включить в решение img события onload и onerror.

Я публикую здесь, чтобы узнать, сталкивался ли кто-либо с подобной проблемой и каково было ее решение.

Спасибо!

Answer 1

Кажется, у тебя правильная идея. Я написал бы функцию, которая пытается загрузить первый URL и установить свойство onerror для повторного вызова функции. Вы можете установить функцию onload, чтобы фактически показывать изображение, так как вы знаете, что это удалось.

Возможно, вы захотите избавиться от глобальной переменной, но вот идея:

var images = ["bad.jpg", "error.jpg", "good.jpg", "not-tried.jpg"];

function tryNextImage() {
    var url = images.shift();
    if (url) {
        var img = new Image();

        img.onload = function() {
            document.body.appendChild(img);
        };
        img.onerror = tryNextImage;

        img.src = url;
    }
    else {
        // Handle the case where none of the images loaded
    }
}