我的jQuery Image预加载器功能正常工作吗？

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; width:0; height:0样式visibility: hidden; width:0; height:0 visibility: hidden; width:0; height:0 visibility: hidden; width: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');
});