ImageLazyLoad JQ说明

最新推荐文章于 2024-05-08 17:33:47 发布

原创最新推荐文章于 2024-05-08 17:33:47 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在网页中使用JavaScript替换图片，并通过懒加载技术提高页面加载速度。通过实例演示了如何利用jQuery和原生JavaScript实现图片预加载与延迟加载功能。

<img src="images/loading.gif" data-original="images/03.jpg">这种格式必须的，不能用<img src="images/demo/03.jpg">，然后通过JS替换，因为主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码。ready()的方法绑定在document对象也不可以。

类似替换代码如下var adres ="images/loading.gif" ;
var data = $("img").attr("src");
$("img").attr("src", adres);
$("img").attr("data-original", data);
$("img").lazyload({
placeholder : "images/loading.gif",
effect : "fadeIn"
});