防止图像加载

Question

是否有一种方法与javascript/jquery防止图像加载？我正在从带有图像的html列表中构建幻灯片.所以我想收集所有src数据,然后阻止图像加载.因此,当用户真正需要图像时,我会加载它.

我在谷歌上发现了一些延迟加载脚本,但无法找到阻止图像加载的方式.

提前致谢.

编辑1:
从答案中可以看出,无法使用javascript来阻止图像加载. 这是一个延迟加载的脚本.谁有人解释它是如何工作的？似乎当javascript关闭时它只是正常加载图像,当它在它上面时会在你滚动到它们的位置时加载它们.

Answer 1

您可以将图像包装在noscript标记中:

<noscript>
<img src="foo.jpg"/>
</noscript>

启用了JavaScript的所有浏览器都将忽略图像标记,因此不会加载图像.

Answer 2

如果您在页面上呈现HTML,即使它被隐藏,也会加载.如果您希望图像仅在需要时加载,则您必须在javascript中动态设置图像标记上的源(src).

编辑1:您引用的脚本仅检查您向下滚动页面的距离,然后通过检查其顶部来确定哪些图像可见(或几乎可见) - 请参阅$ .belowthefold和$ .rightoffold扩展.

当图像大小相同时,该示例效果很好,因为它们的容器也可以是相同的大小,并且当您延迟加载它们时,您将不会获得任何奇怪的页面大小调整行为.如果您的图像的高度和宽度不同,您可能会得到一些奇怪的结果.  

编辑2:

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />

Answer 3

将URL存储在其他位置,然后将所有图像URL设置为某个虚拟图像(空,透明,"加载数据......",等等).当应该显示图像时,使用JS设置src属性,浏览器将获取它.

Answer 4

好吧，通过Prototype，您可以执行以下操作：

var unloaded = [];
$$('img.noload').each(function (image) {
    unloaded.push(image);
    image._src = image.src;
    image.src = '';
});

要加载所有它们：

unloaded.each(function (image) {
    image.src = image._src;
});

要加载第一个：

function loadImage (image) {
    image.src = image._src;
}

loadImage(unloaded.shift());

好吧，我希望你有这个主意。