如何实现图片逐渐加载逐渐显示 转载

图片站打开速度慢怎么办?空间不好有几张图片打开速度慢,怎么办?等等,对于有图片的网站打开速度慢,会导致用户不耐烦的跳出,使网站的跳出率增加,这也是网站排名迟迟上不去的原因之一。今天东东SEO博客给大家分享一个图片延迟加载技术(ImageLazyLoad技术)。

一、ImageLazyLoad技术介绍:

1、在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。

2、ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

二、图片加载技术的好处:

图片是在下拉滚动条时加载,这是一个非常不错的用户体验,同时减少了页面加载的时间了,也减轻了服务器的压力。对网站优化有莫大的的好处。

三、实现方法:

1、在头部<head></head>直接添加以下三段代码:

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

<script type=”text/javascript”>
var Img = “images/lazyload.gif”;
jQuery.noConflict()(function(){jQuery.noConflict()(“img”).lazyload({placeholder:Img,effect:”fadeIn”});});
</script>

如图:

图片加载技术案例

2、把JS文件放在模板文件夹里,以及复制images文件里的lazyload.gif,粘贴到我们模板里的images文件夹里。OK完事!

    转自http://www.tangshanseo.net/590.html

图片加载技术下载地址:http://pan.baidu.com/s/1c0thefu

案例地址:www.0315zhuangxiu.com

原文地址:https://www.cnblogs.com/xuepei/p/3806368.html