Question

我已经编写了一个函数，它将加载所有小图像加载后的链接（对于那些不知道的人）加载的灯箱库中的所有大图像$（window）.load（）。< / p>

以下是代码：

$(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样式还是我的方法有效？

感谢。

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

我的jQuery Image预加载器功能是否有效？

1 个答案: