小编典典

防止图像加载

javascript

有没有办法用javascript /
jquery防止图像加载?我正在从带有图像的html列表构建幻灯片。因此,我想收集所有src数据,然后阻止加载图像。因此,稍后当用户真正需要图像时,我便会加载它。

我在Google上找到了一些延迟加载脚本,但找不到阻止图像加载的方式。

提前致谢。

Edit1:
从答案看来,不可能使用javascript来防止图像加载。
这是一个执行延迟加载的脚本。谁能解释它是如何工作的?似乎当javascript关闭时,它只是正常加载图像,而当它打开时,将在您滚动到图像的位置时加载图像。


阅读 274

收藏
2020-05-01

共1个答案

小编典典

如果您在页面上呈现HTML,则即使HTML被隐藏,也将被加载。如果您希望仅在需要时才加载图像,则必须在javascript中的image标记上动态设置源(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" />
2020-05-01