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
    }
}