如何在加载时不加载页面上的所有图像答案

【问题标题】：How not to load all images on a page on load如何在加载时不加载页面上的所有图像
【发布时间】：2010-08-06 10:14:01
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css xhtml

【解决方案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>

Galleria 将这两种方式都识别为有效的数据源。

【讨论】：

【解决方案2】：

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

除此之外，您必须调整图库插件以加载显示 div 时包含的图像。一种想法是为所有图像提供一个指向 1x1 透明 GIF 的 src 属性：

<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 属性。

【讨论】：

【解决方案3】：

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();

【讨论】：

【解决方案4】：

是的，根据您加载 Galleria 的方式，您有多种选择..

如果你通过js加载，你可以动态加载js，就像谷歌分析加载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。

【讨论】：