Мои изображения не обновляются сразу после смены src в javascript

Question

Я использую функцию ниже, чтобы изменить img src.Это массив из десяти изображений.При прохождении цикла с использованием точек останова не все изображения сразу обновляются на странице.Некоторые из них делают.Если я проверяю неизмененные изображения на странице (в режиме паузы в точке останова), src изменился, но изображение еще не изменилось.Все неизмененные изображения корректно обновляются после завершения функции.Кто-нибудь знает, почему они не все обновляются мгновенно и как я могу заставить их обновить?Кроме того, есть ли способ, которым я могу отложить обновления всех из них, пока они все не будут переназначены и, таким образом, чтобы они все обновлялись на «одновременно»?Вот моя функция.

function mainFunction(){
    finalSet = calculateSet();
    for ( var int = 0; int < finalSet.length; int++) {
        var fileName = "cardImg" + (int);
        document.getElementById(fileName).src = "images/cards/" + finalSet[int].name + ".jpg";
    }
}

Спасибо за помощь.Dale

Answer 1

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

Надеюсь, это решит вашу проблему.

Answer 2

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

Вы можете сделать это, например, при загрузке страницы.Притворись, что они у тебя в массиве.

var images = ["img1.jpg", "img2.jpg"]
var loadedImages = []
var img
for (var i = 0; i < images.length; i++) {
   img = new Image().src = images[i]
   loadedImages[i] = img // not sure if this is needed
}

Ты также можешь проявить фантазию и проверить, загружаются ли изображения с помощью события load.Некоторое обсуждение этого можно найти здесь: http://api.jquery.com/load-event/

Наконец, вы, вероятно, можете использовать скрипт предварительной загрузки изображений: Предварительная загрузка изображений с помощью jQuery

Answer 3

Изображения отображаются только после загрузки.
Возможно, вы захотите предварительно загрузить свои изображения для мгновенного результата.
Что-то вроде этого должно сработать:

function preloadImg(src,callback){
    var img = new Image();
    img.onload = callback;
    img.src = src;
}
function preloadImages(imgs,callback){
    var imagesToLoad = imgs.length;
    var _f = function(){
        if(imagesToLoad > 0) 
            return;
        callback();
    } 
    for(var i=0,l=imgs.length;i<l;i++)
        preloadImg(imgs[0],function(){
            imagesToLoad--;
            _f();
        });
}

preloadImages(yourImages,mainFunction);

Answer 4

без javascript вы можете предварительно загрузить их, поместив их в скрытый div (отображать: нет), который вы поместите где-нибудь после миниатюр (поэтому браузер сначала загрузит миниатюры)