我的图片在javascript中更改其src后不会立即更新

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

谢谢您的帮助。 戴尔

Answer 1

图像仅在加载后显示。
您可能需要预加载图像以获得即时结果。
这样的事情应该可以解决：

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 2

我也有这个问题。 我发现缓存图像需要一段时间，然后在所有图像缓存后第二次正常运行

希望这能解决您的问题。

Answer 3

您需要在调用change事件之前预加载图像。

您可以这样操作，例如在页面加载时。 假设您将它们放在一个数组中。

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 4

没有javascript，您可以预加载它们，然后将它们全部放到您在缩略图后面放置的隐藏div（显示：无）中（这样浏览器将首先加载缩略图）