Javascript 我的jQuery图像预加载程序功能正常吗？

我编写了一个函数，在加载所有小图像$（window.load（））后，该函数将加载lightbox gallery中由链接引用的所有大图像

代码如下：

$(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');
    }
});

$（窗口）.load（函数（）{
如果（$（'ul#gallery'）。长度>0）{
//制作一个容器，填充图像并将其附加到页面正文
var c=$（“”）.attr（{style:'display:none'，id:'gallerypreload'}）；
$（“ul#gallery li>a”）。每个（函数（）{
$('
画廊看起来像这样：

<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（））触发的淡入效果

我这里的问题是：所有浏览器是否都将附加到主体的图像预加载到容器中？因此它不会显示，理论上他们不应该加载图像，还是这样？我应该设置样式
可见性：隐藏；宽度：0；高度：0
还是我的方法有效

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

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

甚至

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

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

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

甚至

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

@Vincent：是的，使用图像对象预加载东西是最古老的方法。我从上个千年就开始使用它：）好的，谢谢。但是我需要将图像标记附加到dom吗？图像对象可以独立吗？我现在使用的是
new Image（）.src=$（this.attr（'href'））；
。谢谢。@Vincent:是的，如果您想显示图像，您仍然需要在文档中附加实际的IMG标记。JS图像对象只存在于“代码”中；它不是html标记，只是数据。不，我不想显示图像。附加的-标记位于-标记中。实际图像由Slimbox2显示，Slimbox2是leightweight Lightbox的克隆。那么我不再需要这些了？谢谢。@Vincent:您可能需要在代码中添加一些括号，即
（new image（））.src=..
它应该可以工作。但实际上，为了清晰起见，保持两行是很容易的。@Vincent:是的，使用图像对象预加载东西是最古老的方法。我从上个千年起就开始使用它：）好的，谢谢你。但是我需要在dom中附加图像标记吗？图像对象可以独立吗？我现在使用的是
new image（）.src=$（this.attr（'href'）；
。谢谢。@Vincent:是的，如果你想显示图像，你仍然需要在文档中附加实际的IMG标记。JS图像对象只存在于“代码”中；它不是html标记，只是数据。不，我不想显示图像。附加的-标记位于-标记中。实际图像由Slimbox2显示，Slimbox2是leightweight Lightbox的克隆。那么我不再需要这些了？谢谢。@Vincent:您可能需要在代码中添加一些括号，即
（new image（））.src=..
它应该可以工作。但实际上，为了清晰起见，保持两行同样容易。