在 javascript 中更改它们的 src 后，我的图像不会立即更新答案

【问题标题】：My images aren't updating immediately upon changing their src in javascript在 javascript 中更改它们的 src 后，我的图像不会立即更新
【发布时间】：2014-05-28 23:44:59
【问题描述】：

我正在使用下面的函数来更改 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";
    }
}

感谢您的帮助。戴尔

【问题讨论】：

我也有这个问题。我发现缓存图像需要一段时间，然后在所有图像缓存后第二次正常工作
有趣。我想你搞定了。在运行我的测试之前，我写了一些缓存它们的东西，它们立即更新。谢谢。那么，有人可以准确地解释那里发生了什么吗？在 javascript 调用结束之前，浏览器是否不会检索那些未缓存的图像？我想了解详情。
此外，有没有办法让浏览器提前缓存所有图像？在我问之前，你们已经回答了。不错！
您可以预加载它们，但如果需要，请记住将我的答案标记为已接受。

标签： javascript image src

【解决方案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);

【讨论】：

【解决方案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/

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

【讨论】：

【解决方案3】：

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

希望这能解决您的问题。

【讨论】：

【解决方案4】：

如果没有 javascript，您可以预加载它们，将它们全部放在隐藏的 div 中（显示：无），然后放置在缩略图之后的某个位置（因此浏览器将首先加载缩略图）

【讨论】：