Question

我正在创建一个预加载几个大型GIF的网站。由于图像的大小。我需要在显示给用户之前加载它们。在过去，我使用过这样的基本内容做了很多次：

var image = new Image();
image.onload = function () { document.appendChild(image); }
image.src = '/myimage.jpg';

但是，我正在从一个包含图像源URL的数组中加载一组图像。它应该显示一条加载消息，一旦它们全部加载，它就会执行回调并隐藏加载消息等。

我一直在使用的代码如下：

var images = ['image1.gif', 'image2.gif', 'image3.gif'];

function preload_images (target, callback) {        

    // get feedback container
    var feedback = document.getElementById('feedback');

    // show feedback (loading message)
   feedback.style.display = 'block';

    // set target
    var target  = document.getElementById(target);

    // clear html of target incase they refresh (tmp fix)
    target.innerHTML = '';      

    // internal counter var
    var counter = 0;

    // image containers attach to window
    var img = new Array();

    // loop images
    if (images.length > 0) {

        for (var i in images) {

                // new image object
                img[i] = new Image();

                // when ready peform certain actions.
                img[i].onload = (function (value) {             

                // append to container
                target.appendChild(img[value]);             

                // hide all images apart from the first image
                if (value > 0) {
                    hide(img[value]);
                }               

                // increment counter
                ++counter;                  

                // on counter at correct value use callback!
                if (counter == images.length) {

                  // hide feedback (loading message)
                 feedback.style.display = 'none';

                  if (callback) {
                     callback(); // when ready do callback!
                  }

                }

            })(i);

            // give image alt name
            img[i].alt = 'My Image ' + i;

            // give image id
            img[i].id  = 'my_image_' + i

            // preload src
            img[i].src = images[i];             

        }//end loop

    }//endif length

}//end preload image

这真的很奇怪，我确定它应该可行，但它甚至不显示我的加载信息。它只是直接回调。我确定它必须是简单的东西，我一直忙着看着它多年，发现它有点难以缩小。

我一直在关注stackoverflow，人们遇到了类似的问题，我已经尝试过没有太多运气的解决方案。

任何帮助将不胜感激！如果需要，我会发布更多代码。

干杯！

Answer 1

如果我没有完全错，那么问题在于你的任务

// when ready peform certain actions.
img[i].onload = (function (value) {...})(i);

这里你立即调用并执行该函数并将undefined返回到onload属性，这是加载图像时无法调用的。

如果您在加载图片时可以访问值'i'，可以尝试以下操作：

onload = (function(val){
    var temp = val;
    return function(){
         i = temp;
         //your code here
    }
})(i);

这应该将值存储在temp中，并返回一个可调用的函数，该函数应该能够访问该值。

我没有测试它是否正常工作并且可能有更好的解决方案，但是我想到了这一点：）

Answer 2

尝试使用onload回调：

img[i].onload = function(event) {
    target.appendChild(this);

    if (img.indexOf(this) > 0) {
        hide(this);
    }

    // ...
};

希望你能让它运转起来！不过，这是我的睡觉时间。

编辑：你可能要做一些关于img.indexOf（这个）的事情......只是意识到你正在使用img的关联数组。在原始代码中，我不认为在这种情况下将值与0进行比较是合乎逻辑的，因为value是一个字符串。也许你不应该使用关联数组？

使用JavaScript附加和预加载图像

2 个答案: