在浏览器中加载html页面时如何避免加载所有图像?

时间:2014-03-09 10:00:00

标签: javascript html dom

我的网页包含很多img标签,但是当它最初显示时,大多数img都被隐藏了。我想仅在用户显示查看它们的意图时加载imgs,否则页面可能会产生过多的网络流量。

我知道我可以使用javascript动态地将img标签插入到DOM中。但是这样我失去了搜索引擎索引这些图像的好处,我希望搜索引擎机器人能够看到这些图像。

有没有办法保持DOM结构不变,只在需要时加载imgs?

2 个答案:

答案 0 :(得分:2)

您可以尝试延迟加载: 延迟加载延迟加载长网页中的图像。在用户滚动到视口之前,视口外部的图像不会加载。这与图像预加载相反。

演示:http://www.appelsiini.net/projects/lazyload/enabled_timeout.html

http://www.appelsiini.net/projects/lazyload
https://github.com/tuupola/jquery_lazyload
http://luis-almeida.github.io/unveil/

答案 1 :(得分:1)

您可以做的是将所有图片放在<noscript>标记中,因此没有JavaScript的浏览器以及搜索引擎都可以看到它们。

然后,您可以手动使用JavaScript添加图像,以便拥有它。