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