我的图像不是'；t在javascript中更改src后立即更新

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

function main函数（）{
finalSet=calculateSet（）；
对于（var int=0；int

谢谢你的帮助。

---

Dale

图像只有在加载后才会显示。
您可能希望预加载图像以获得即时结果。
像这样的东西应该会起作用：

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);

函数preload-img（src，回调）{
var img=新图像（）；
img.onload=回调；
img.src=src；
}
函数预加载映像（imgs、回调）{
var imagesToLoad=imgs.length；
var_f=函数（）{
如果（图像加载>0）
返回；
回调（）；
} 
对于（var i=0，l=imgs.length；i图像仅在加载后显示。

您可能希望预加载图像以获得即时结果。

像这样的东西应该会起作用：

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);

函数preload-img（src，回调）{
var img=新图像（）；
img.onload=回调；
img.src=src；
}
函数预加载映像（imgs、回调）{
var imagesToLoad=imgs.length；
var_f=函数（）{
如果（图像加载>0）
返回；
回调（）；
} 
对于（var i=0，l=imgs.length；i我也有这个问题。我发现缓存图像需要一段时间，然后在缓存所有图像后第二次正常工作

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

希望这能解决您的问题。
在调用更改事件之前，您需要预加载图像

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

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
}

var images=[“img1.jpg”、“img2.jpg”]
var loadeImage=[]
var-img
对于（var i=0；i

您还可以想象一下，检查是否使用load事件加载了图像。有关这方面的一些讨论可以在此处找到：

最后，您可能可以使用图像预加载程序脚本：
在调用更改事件之前，您需要预加载图像

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

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
}

var images=[“img1.jpg”、“img2.jpg”]
var loadeImage=[]
var-img
对于（var i=0；i

您还可以想象一下，检查是否使用load事件加载了图像。有关这方面的一些讨论可以在此处找到：

最后，您可能可以使用图像预加载程序脚本：
没有javascript，您可以预加载它们，将它们全部放在一个隐藏的div（display:none）中，放在缩略图之后的某个位置（因此浏览器将首先加载缩略图）
没有javascript，您可以预加载它们，将它们全部放在一个隐藏的div（display:none）中，放在缩略图之后的某个位置（因此浏览器将首先加载缩略图）
我也遇到了这个问题。我发现缓存图像花了一段时间，然后在所有图像都缓存有趣后第二次正常工作。我想你解决了。我写了一些东西，在运行测试之前缓存了所有图像，并立即更新。谢谢。那么，有人能准确解释一下发生了什么吗ere？在javascript调用结束之前，浏览器不会检索那些未缓存的图像吗？我想了解详细信息。此外，有没有办法让浏览器提前缓存所有图像？在我问之前，你们已经回答了。很好！你们可以预加载它们，但如果需要，请记住将我的回答标记为已接受。我有这个问题也是。我发现缓存图像需要一段时间，然后在所有图像都缓存有趣后第二次正常工作。我想你搞定了。在运行测试之前，我写了一些缓存它们的东西，它们立即更新。谢谢。那么，有人能确切地解释一下那里发生了什么吗？你知道吗在javascript调用结束之前，浏览器不会检索那些未缓存的图像？我想了解详细信息。此外，有没有办法让浏览器提前缓存所有图像？在我问之前，你们已经回答了这个问题。很好！你们可以预加载它们，但如果愿意，请记住将我的回答标记为已接受。