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

在调用更改事件之前，您需要预先加载图像。

你可以这样做，比如加载页面时。假装你把它们放在一个数组中。

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
}

您还可以使用加载事件来检查是否加载了图像。关于这方面的一些讨论可以在这里找到：http://api.jquery.com/load-event/

最后，您可以使用图像预加载器脚本： Preloading images with jQuery

Answer 4

没有javascript你可以预加载它们将它们全部放在一个隐藏的div（display：none）中，你放在缩略图之后的位置（所以浏览器会首先加载缩略图）

在javascript中更改src后，我的图像没有立即更新

4 个答案: