如何在加载的页面上加载页面上的所有图像

Question

我有一页页面上有一张jpg图像列表。包含图像的div被隐藏，并作为Galleria jQuery图库插件的图像源。所以，当我加载一个页面时，加载它需要很长时间，因为它加载了所有图像。有没有办法在页面加载时不加载所有这些图像，而只是当广场需要它们时？

Answer 1

您可以加载图像的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> 

广场识别两种方式作为有效数据源。

Answer 2

我不知道它是否以及如何能够与您的Gallery插件配合使用，但是有一个用于jQuery的Lazy Loading plugin。它在进入视口时加载图像。也许值得一看。

除此之外，你将不得不调整画廊插件加载包含的图像，当它显示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> 

，并指派真实src财产div得到显示的时刻。

Answer 3

是的，这取决于你如何加载拱廊你有几种选择..

如果通过JS加载它，你可以加载JS以动态的方式，同样谷歌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

jQuery image lazy load plugin的演示页面在Mac上的FF3.6上似乎不起作用。我正在用Firebug的Net标签查看HTTP请求，我可以看到所有加载的图像。

也许值得看看这个名为JAIL的插件，它只加载在视口中可见的图像。

你的HTML可以关注一下：

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

和JS

$('img').asynchImageLoader();