我的网页包含很多img标签,但是当它最初显示时,大多数img都被隐藏了。我想仅在用户显示查看它们的意图时加载imgs,否则页面可能会产生过多的网络流量。
我知道我可以使用javascript动态地将img标签插入到DOM中。但是这样我失去了搜索引擎索引这些图像的好处,我希望搜索引擎机器人能够看到这些图像。
有没有办法保持DOM结构不变,只在需要时加载imgs?
答案 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添加图像,以便拥有它。