我的 jQuery 图像预加载器功能可以工作吗？

Question

我编写了一个函数，它将在加载所有小图像 $(window).load() 后从灯箱画廊加载所有大图像，这些图像由链接引用（对于那些不知道的人）。

代码如下：

$(window).load(function() {
    if ($('ul#gallery').length > 0) {
        // make a container, fill in images and attach it to the page body
        var c = $("<div />").attr({style: 'display: none', id: 'gallerypreload'});
        $("ul#gallery li > a").each(function() {
            $('<img />').attr('src', $(this).attr('href')).appendTo(c);
        });
        c.appendTo('body');
    }
});

图库看起来像这样：

<ul id="gallery">
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li>
</ul>

我想这样做，因为浏览器应该首先加载所有缩略图，然后预加载较大的图像以供查看。另外，我还编写了某种由 $(window).load() 触发的淡入淡出效果。

我的问题是：所有浏览器都会预加载附加到容器中正文的图像吗？因此它不会显示，理论上他们不应该加载图像，或者是吗？我应该设置 visibility:hidden; 的样式吗？宽度：0； height:0 还是我的方法有效？

谢谢。

Answer 1

您可以通过使用要预加载的 src 创建 javascript 图像对象来强制预加载

$("ul#gallery li > a").each(function() {
    var preload = new Image();
    preload.src = $(this).attr('href');
    $('<img />').attr('src', preload.src).appendTo(c);
});

然后，IMG 标签是否可见并不重要

---

根据下面的评论，这应该足以预加载图像：

$("ul#gallery li > a").each(function() {
    var preload = new Image();
    preload.src = $(this).attr('href');
});

甚至

$("ul#gallery li > a").each(function() {
   (new Image()).src = $(this).attr('href');
});