前端优化-图片懒加载

一、什么是懒加载

　　懒加载技术(简称lazyload)是对网页性能优化的一种方案。lazyload的核心是按需加载，避免网页打开时加载过多资源，让用户等待太久，在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。这里我们主要是对img标签使用懒加载技术，使用jquery的query.lazyload.js库实现。

　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

二、为何要是用懒加载技术？

　　比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。

三、如何实现？　　

　　主要有以下2个关键点：

      1、页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提高性能咯），一旦通过javascript设置了图片路径，浏览器才会送请求。有点按需分配的意思，你不想看，就不给你看，你想看了就给你看~

　　2、怎么获取真正的路径，这个简单，现在真正的路径存在元素的“data-original（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；　　

第一步，引入懒加载所需的js文件
<script src="jquery.lazyload.js"></script>
第二步，img标签的属性如下：
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
第三步，在对应的js文件中，对img标签调用如下imgLazyLoad方法.

四、懒加载方法　

function imgLazyLoad(param,$dom){
	var placeholder = baseUrl + '/lar-ui/imgs/placeholder/0.png';
	var extendParam = $.extend({effect: 'fadeIn',placeholder: placeholder}, param);
	if($dom){
		$($dom).find('img.lazy').lazyload(extendParam);
	}else{
		$('img.lazy').lazyload(extendParam);
	}
}

参数说明

　　1)$dom为实施懒加载的dom元素，param对象中的参数含义如下

　　2)Placeholder : "img/grey.gif", //用图片提前占位。

　　3)threshold : 200, //提前开始加载。值为数字，代表的页面高度。目的在于加载图片时可以做到不让用户察觉。

　　4)event : "click", //事件触发时才加载，值有click,mouseover,foobar等，可以像这样触发：find('img.lazy').trigger('foobar')。

　　5)effect : "fadeIn" ,//载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等。

　　6)container: $("#container")//容器内水平滚动效果,滚动时按需加载。Lazyload默认是在拉动浏览器滚动条的时候生效，这个参数还可以让你在拉动某个DIV的滚动条时依次加载其中图片

　　7)failurelimit:图片排序混乱时,值为数字，lazyload默认在找到第一张不在可视区域里的图片时则不在继续加载，如果当HTML容器里混乱的时候有可能会出现可见区域内的图片加载不出来的情况，failurelimit意在加载N张可见区域外的图片，避免出现这个问题。

五、方法的调用

　　

imgLazyLoad(
    {effect:'show'},//载入时的效果
    $('#myCarousel')//获取需要实施懒加载的DOM元素
);

 

转载于:https://www.cnblogs.com/jiqk/p/6489100.html