lazyload.js（懒加载）

 

两种方式：

1.JQuery Lazyload方式

https://www.w3cways.com/1765.html

依赖jQuery框架

2.echo.js方式

https://github.com/helijun/helijun/tree/master/plugin/echo

不依赖jQuery框架，功能没有Lazyload全面

 

基本步骤：

一.引入

<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/jquery.lazyload.min.js"></script>

二. 插入图片：

1.注意图片需要设置宽高

2.将data-original的地址替换给src地址。

<img class="lazy" src="images/lazyload279-173.gif" data-original="images/jiudian_t_278518_xxx1130.jpg" height="700px" width="600px" alt="" />

三.Javascript(调用)

<script>
			$(function() {
				$("img.lazy").lazyload(
					{
						effect : "fadeIn"
					}
				);
			});
</script>