首先加載特定的圖像，然后加載頁面的其余部分

Question

問題：

我們有一個頁面可加載幾百張圖片（該頁面上的請求和字節的92％來自圖像），並且正在尋找在特定div（約20張圖像）內加載圖像的方式，然后再加載其余圖像這一頁。

搜索后，似乎人們使用了分頁或延遲加載-客戶已排除了延遲加載，如果我們能幫助的話，我們都不希望分頁。

---

題：

有沒有一種簡單的方法可以強制瀏覽器先加載某個div（或多個div）內的圖像，然后再加載其余圖像？

---

技能：

我們的javascript / jquery受到限制（只能閱讀他人的說明）-因此，向正確方向提供的任何幫助或指針將不勝感激。

Answer 1

你應該像這樣得到你的圖像

window.on('load',function(){
//functionality to get images for the later load from server
})

Answer 2

如何這樣預加載圖像（放在頭部）：

<script type="text/javascript">

Image1 = new Image()
Image1.src = "image1.gif"

Image2 = new Image()
Image2.src = "image2.gif"

Image3 = new Image()
Image3.src = "image3.gif"

</script>

來源： http : //www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001

另一種方式： http : //perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/

Answer 3

試試這個插件http://imagesloaded.desandro.com/ 。 插件可以檢查容器（div）是否已加載？中的所有圖像。 檢查后，如果返回true，則可以加載其他圖像。

例如。

<div id="container">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
    <img src="first images to be loaded">
</div>
<div id="otherImgs"><div>
    <script>
        $(document).ready(function(){
            var imgs = ["img1.jpg","img1.jpg","img1.jpg"];
            imagesLoaded( document.querySelector('#container'), function( instance ) {
                for(i in imgs){
                    var img = $("<img />").attr('src', "test/"+imgs[i]);
                    $("#otherImgs").append(img);
                }
            });
        });
    </script>