防止图像加载 [英] Prevent images from loading

问题描述

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

is there a way with javascript/jquery to prevent images from loading? I am building a slideshow from a html list with images. So I would like to collect all the src data and then prevent the images from loading. So later when the user really needs the image I would load it then.

我在谷歌上发现了一些延迟加载脚本但却找不到阻止图像加载的方式。

I found some lazy loading script on google but couldn't find the way they prevent images from loading.

提前致谢。

编辑1：

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

It seems from the answers that it's not possible to use javascript to prevent images from loading. Here is a script that does lazy loading. Could anybody explain how it works? It seems when javascript is off it just loads the images normaly and when it's on it will load them when you scroll to their location.

推荐答案

如果你在页面上渲染HTML，即使它被隐藏了，它也会加载。如果您希望图像仅在需要时加载，则您必须在javascript中动态设置图像标记上的源（src）。

If you render the HTML on the page, even if it's hidden, it's going to load. If you want images to load only when they're needed, you're going to have to dynamically set the source (src) on the image tag in javascript.

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

Edit 1: The script you referenced merely checks to see how far you've scrolled the page down and then determines which images are visible (or almost visible) by checking their top -- see the $.belowthefold and $.rightoffold extensions.

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

The example works great when the images are all the same size because their containers can also be the same size and you won't get any odd page resizing behavior when you lazy load them. If your images' heights and widths vary, you may get some odd results.  

编辑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" />

这篇关于防止图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！