jquery-懒加载技术(简称lazyload)

2023-01-23 19:50:50

第一：lazyLoad简介及作用

网站性能优化的插件，提高用户体验。

页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。

第二：使用场合

涉及到图片，falsh资源，iframe，网页编辑器(CK)，JS文件等占用较大带宽，避免网页打开时加载过多资源，让用户等待太久。

第三：代码使用

1.导入JS插件(前提有 1.6.2.js文件)

<script src="js/jquery.lazyload.js" type="text/javascript"></script>

2.在你的页面中加入如下：

<script type="text/javascript">

    $("img").lazyload();

</script>

所以图片都延迟加载。

3.设置敏感度区域

插件提供了 threshold 选项

$("img").lazyload({ threshold : 200 })

将临界值定为 200，默认情况下，当他们出现在屏幕上时，默认的图像加载。如果要加载早期使用阈值参数的图像。设置阈值200使图像加载200像素才能显示在视口。

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

高级篇详细介绍（不想了解那么多的可以直接绕过）

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱.

怎样使用?

Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

4. 还有涉及到高级应用，触发事件，多参数等等。详细见参考 url 参考：

码农公寓