lazyload实现图片懒加载，并解决swiper切换图片不显示问题

究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一 个img 标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。

页面开始使用 lazyload.js

第一步：加载相关文件。

很明显，你要加载jquery和这个插件。你可以使用以下代码，加载这几个文件：

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

第二步：定义图片结构。

按照官方的建议，定义你的img结构：

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

第三步：触发这个插件，生效。

激活以下，你就可以在目标中使用了。

$("img.lazy").lazyload();

lazyload.js 高级使用方法：

下面部分来自官方文档，将官方文档进行了一下简单的翻译。

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。

应对这个问题，我们需要引入 noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。对现有图像，隐藏处理，使用 show() 方法触发显示。这样，如果浏览器不支持 Javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下：

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
<script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

提前加载

默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。

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

threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。

自定义触发事件

默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。

$("img.lazy").lazyload({ event : "click" });

自定义显示效果

默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置 effect 属性，来控制显示图片的效果。例如

$("img.lazy").lazyload({ effect : "fadeIn" });

fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： effect demo page

把图像插入某个容器

大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果： vertical

#container { height: 600px; overflow: scroll; }

$("img.lazy").lazyload({         
     container: $("#container")
});

加载不可见图像

有部分图像是不可见的，我们对其加上类似 display：none 等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像，我们需要将 skip_invisible 设置为 false

$("img.lazy").lazyload({ skip_invisible : false });

综合应用

$("img.lazyload").lazyload({
	skip_invisible : false, //加载不可见的插件
	effect : "fadeIn", //加载效果
	threshold : 200,  //提前加载，200是指200px
});

解决切换不能使用lazyload的情况

如果使用swiper要以使用以下的方法：

var swiper4 = new Swiper('.swiper4', {
	slidesPerView: 1,
	//切缘事件使用
	on: {
		slideChangeTransitionStart: function(){
			$(window).trigger('scroll');
		},
	},
});

其它切换使用方法：

//给TAB切换里的LI绑定点击事件，来触发懒加载
$('.slideTxtBox .hd li').on('click', function (e) {
    $(window).trigger('scroll');
});

相关内容