详解jQuerylazyload懒加载资源-CSDN文库

129 浏览量 2020-10-20 20:17:28 上传评论收藏 72KB PDF 举报

jQuery lazyload 懒加载是一种优化网页性能的技术，它通过JavaScript实现，主要用于长页面中的图片加载。该技术的核心思想是只加载用户当前可视区域内的图片，对于那些位于屏幕之外的图片，会在用户滚动页面时才进行加载。这样可以显著提高页面的初始加载速度，减少服务器负担，同时改善用户体验。要使用jQuery lazyload插件，首先确保引入了jQuery库和lazyload插件的JS文件。在HTML文档的`<body>`标签之前添加如下代码： ```html <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> ``` 然后，需要修改图片的HTML结构，将实际的图片URL放置在`data-original`属性中，并给图片添加一个特定的CSS类，例如`lazy`： ```html <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> ``` 在DOM加载完成后，使用以下jQuery代码初始化lazyload： ```javascript $(function() { $("img.lazy").lazyload(); }); ``` 此代码将使所有`class`为`lazy`的图片启用懒加载功能。 ### 基本选项和配置 - **阈值(Threshold)**：默认情况下，图片在进入视口时加载。通过设置`threshold`选项，可以提前加载图片，例如`threshold : 200`表示图片距离屏幕200像素时开始加载。 - **触发事件(Event)**：默认是滚动事件。可以使用`event`选项设置其他事件，如`click`或`mouseover`，使得图片在特定事件触发时加载。 ### 特效 - **FadeIn 效果**：通过设置`effect`选项为`fadeIn`，图片加载时会淡入显示。 ### 优雅降级对于不支持JavaScript的浏览器，可以使用`<noscript>`标签提供原始图片，以确保图片能够正常显示： ```html <img class="lazy" data-original="img/example.jpg" width="640" height="480"> <noscript><img src="img/example.jpg" width="640" height="480"></noscript> ``` 并使用CSS隐藏未加载的图片： ```css .lazy { display: none;} ``` 在支持JavaScript的浏览器中，需要在DOM ready时显示占位符： ```javascript $("img.lazy").show().lazyload(); ``` ### 图片在容器内如果图片位于可滚动的容器（如带有滚动条的`div`）中，可以将容器作为参数传递给初始化方法： ```javascript $("#container").懒load({ container: $("#container") }); ``` ### 不连续的图片当图片在页面中不连续分布时，lazyload会检测滚动过程中图片是否进入可视区域，以确保正确加载。 jQuery lazyload是一个强大的工具，通过延迟加载非可视区域的图片，有效提升了页面加载速度，优化了用户体验。结合不同的配置选项和使用场景，可以实现更灵活的图片加载策略。

资源推荐

资源详情

资源评论