如何在加載時不加載頁面上的所有圖像

Question

我有一個頁面上有一個jpg圖像列表。 包含圖像的div是隱藏的，並作為Galleria jQuery圖庫插件的圖像源。 因此，當我加載頁面時，加載它需要很長時間，因為它會加載所有圖像。 有沒有辦法在頁面加載時不加載所有這些圖像，但只是當galleria需要它們時？

Answer 1

我不知道它是否以及如何與您的Gallery插件合作，但是有一個用於jQuery的Lazy Loading插件 。 它在進入視口時加載圖像。 也許值得一看。

除此之外，您必須調整gallery插件以加載顯示div時包含的圖像。 一個想法是給所有圖像src屬性指向1x1透明GIF：

<div class="hidden">
 <img id="image1" src="http://domain.com/images/1x1.gif">
</div>  

並使用真實圖像源保持JavaScript數組：

<script>
ImageSources = new Array();
ImageSources[1] = "http://domain.com/images/big_fat_image.jpg";
...
</script>

並在div顯示時分配真實的src屬性。

Answer 2

您可以加載JSON圖像數組，而不是將它們放在源代碼中：

var data = [
    {
        image: 'img1.jpg',
        thumb: 'thumb1.jpg',
        title: 'my first image',
        description: 'Lorem ipsum caption',
        link: 'http://domain.com'
    },
    {
        image: 'img2.jpg',
        thumb: 'thumb2.jpg',
        title: 'my second image',
        description: 'Another caption',
        link: '/path/to/destination.html'
    }
];

$('#container').galleria({
    dataSource: data
});

您還可以添加自定義縮略圖：

<a href="big.jpg"><img src="thumb.jpg"></a>

Galleria將這兩種方式視為有效的數據源。

Answer 3

是的，根據你如何加載Galleria你有幾個選擇..

如果您通過js加載它，您可以動態加載js，就像Google Analytics加載它​​的js一樣：

 (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

（當然，更改js加載的地址）

替代解決方案，為了保存js的往返（特別是如果它來自另一個源並且它是並行的），在加載圖像之前不要調用.loadTheme 。

Answer 4

在Mac上的FF3.6上， jQuery圖像延遲加載插件的演示頁面似乎對我不起作用。 我正在使用Firebug的Net選項卡觀看HTTP請求，我可以看到加載的所有圖像。

也許值得看看這個名為JAIL的插件，它只加載視口中可見的圖像。

您的HTML可能如下所示：

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height"/>

和JS

$('img').asynchImageLoader();