用于画廊的图像预加载器？这有什么问题？答案

【问题标题】：Image preloader one by one for gallery? What is wrong with this?用于画廊的图像预加载器？这有什么问题？
【发布时间】：2013-07-27 18:41:46
【问题描述】：

我想制作一个 JavaScript (jQuery)、HTML 画廊，它有大约 60 张图片。我希望他们一一加载。它们被命名为 1.jpg、2.jpg、3.jpg...等。

所以我开始制作<img id="loader" style="display:none;" src=""/> 这包含实际加载的图像，我用脚本为它提供 src，然后等待它加载，然后将相同的 src 提供给它的实际目的地：

<img class="active_pic" id="a1" src="img/load.gif"/>

完成后，我开始加载第二张图片。我该怎么做？

我尝试使用递归来实现它，这是一个调用自身的函数，但它不会等待图像加载。我用这个：

$("#loader").attr("src",pic);   
$("#loader").ready(function(){$("#a"+active).attr("src",pic);

【问题讨论】：

试试desandro.github.io/imagesloaded 这是一个等待图片加载的跨浏览器解决方案。
图片加载需要多长时间？使用setInterval(function() {/*load picture here*/}, 3000);

标签： javascript jquery html

【解决方案1】：

您可以使用 JS 代码加载图片

var img = new Image();

img.onload = function() {
    // do stuff after image is loaded
};

img.src = pic_url;

更新

JS 函数存根及使用示例

<script>
function load_image(img_url)
{
    // show overlay, spinner, whatever

    var img = new Image();
    img.onload = function() {
        // add <img> tag
        // hide overlay, spinner, whatever
    };
    img.src = img_url;
}
</script>

<a href="jaavscript:load_image('/images/test.jpg');">load image</a>

【讨论】：

但是它会等待图片加载，还是会跳过 img.onload = function() { 因为它还不是真的？
onload 只会在图片加载后触发。因此，将加载其他图像放入该 callabck 中。
并且 img.onload 可以在另一个在 onclick 事件中调用的函数中？
当然可以。但真正触发图像加载的是img.src 的分配。 onload 应该在它之前定义。
如果 img.src 在 img.onload 之前更好吗？所以它可以加载，然后检查它是否加载。

【解决方案2】：

你可以使用图片的onload事件。但是如果你的图片被缓存了，它就不起作用了，所以你可以使用它：

$('img[id|="a"]').each(function() {
    if(this.complete) $(this).trigger('load');
});

var doOnLoad=function(){
    var id=parseInt($(this).attr('id').substr(1));
    $(this).removeClass("active_pic");
    id++;
    $('#a'+id).attr("src",pic[id]).one('load', doOnLoad).addClass("active_pic");
};

$(".active_pic").one('load', doOnLoad);

pic 必须是一个以 id 为键、src 为值的数组。

【讨论】：