网站使用图片懒加载，不仅加器用户体验，并且节省流量，因为图片的流量是最大的。早就写过文章 jQuery Lazy Load 图片延迟加载 懒加载插件 介绍 ，这次再整理案例

1.网页图片懒加载原理

网页图片懒加载的原理很简单，将原来img标签的src替换成掉，再用javascript拖动到窗口显示的时候把src设置回来就会加载图片

<img class="lazy" data-original="img/1.jpg">

2.使用jQuery Lazy Load插件实现懒加载

php先把原来的src标签替换成插件需要的属性

$content=str_ireplace('class="lazy" data-original="','class="lazy" data-original="',$content);

添加js文件

<script class="lazy" data-original="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script class="lazy" data-original="https://cdn.bootcss.com/jquery_lazyload/1.9.6/jquery.lazyload.min.js"></script>

调用懒加载方法

<script>
	$(function() {
		$(".lazy").lazyload({});
	});
</script>

关于lazyload方法的具体参数参考：jQuery Lazy Load 图片延迟加载 懒加载插件 介绍