抄代码|帝国cms+jquery.lazyload.js实现图片延迟懒加载的极简方法

如果你对网站速度优化有一定了解,或者你是用过百度统计提供的网站速度诊断工具的网站管理者,会知晓一件事:一个网站页面图片过多的话,加载时会导致网页打开变慢,甚至看得见“卡顿”的现象。这不仅会影响用户的浏览体验,也会影响到搜索引擎对网站的优劣评判及seo。

网站速度诊断工具

(如上图所示,相比于js等文本类文件,三个红色标注的图片文件,就算kb更小,加载时间亦要久很多)

对于较大型的、有专业程序员配置的网站运营者来说,为网站中的图片实现惰性加载(专业术语,俗称为延迟加载,懒加载),是一件正常不过的事。毕竟,懒加载不是什么新技术,好几年前就已经在较大的互联网站普及了。

那问题来了:什么是懒加载?

答:懒加载是一种网页交互呈现效果。通常而言,首次只加载第一屏(能看得见的)的图片,之后的图片则不加载(或只加载一个文件容量特别小的图片,称为占位图),如果用户拖动滚动条至后面某处位置(这处位置称为可视区域)则再加载图片,这样做的好处是避免网页因加载图片过多而打开慢的弊端。

两个字,提速!如果网站图片多,要提速,那懒加载就是web技术层面的标配。

提升网站页面加载速度,利于seo提升——懒加载好处看上去很多,只是要如何具体地用在自己的网站上呢?对于没有专业程序员参与的网站运营管理者来说,要实现懒加载并不是那么容易。

网上有一些教程,厉害的高手是自己写原生js来解决,更多快捷解决方案是使用jquery.lazyload.js插件,有示例代码及演示(请自行搜索或参见此处链接),这个插件的使用并不难,如果是从零开始构建一个页面,直接套用是没有问题的,可是要套用在帝国cms制作好的网站里,得用什么方式方法呢?

jquery.lazyload.js

经过在学而行营销网的实践摸索,以下是帝国cms结合jquery.lazyload.js实现图片延迟懒加载的极简解决方法。

---------------------------------

首先,要下载jquery.lazyload.js的迷你压缩版,此js文件相当小,只有2k大小。

下载地址:http://www.xueerxing.com/skin/ecms084/js/jquery.lazyload.min.js

(jquery.lazyload.js依赖于jquery,如果网站没有用到jquery,那请下载jquery.js,下载地址:http://www.xueerxing.com/skin/ecms084/js/common.js)

在帝国cms模板的head区域加载此两个js文件,代码如下:

<script src="/skin/ecms084/js/common.js" type="text/javascript"></script>

<script src="/skin/ecms084/js/jquery.lazyload.min.js"></script>

确保网站空间里这哥俩已经上传并存在,并检查此两js文件的引用路径是否正确,还有先后顺序不要乱。

其次,就是需要一段自定义的js代码来实现懒加载,重点在这。学而行营销网的需求如下:

1:首页或列表页的图片式布局实现懒加载;

2:网站内容文章里的图片也比较多,最好能实现懒加载;

欲炼神功,必先自宫

欲炼神功,必先自宫。菜鸟小白请先参考网上的教程,然后再回来。

1.jquery.lazyload.js图片延时加载插件使用教程

2.jQuery图片懒加载 lazyload.js使用方法(深入版)

3.jQuery图片延迟加载插件jQuery.lazyload

4.懒加载插件 – jquery.lazyload.js简单调用

5.织梦dedecms图片加data-original图片延时加载功能代码

第1项需求在帝国cms里比较好实现,因为在模板中用的是灵动标签,可以自行对<img>元素添加样式,尺寸及data-original等属性,依据教程中的范例就可以实现。例如下面的这段模板中的代码,就可以对<img>标签加上任何属性来达成目的。

[e:loop={'news',10,18,1,'istop=0 and firsttitle=0 and isgood=0','newstime DESC'}]
<li class="clear">
<div class="imgarea fl"> <a href="<?=$bqsr['titleurl']?>" target="_blank"><img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>"> </a><span class="cat"><a href="<?=$bqsr[classurl]?>" target="_blank">
<?=$class_r[$bqr[classid]][classname]?>
</a></span> </div>
</li>

其中的<img>可以改成:<img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>" width="640" height="480" data-original="<?=$bqr['titlepic']?>">来符合jquery.lazyload.js的图片匹配要求。

第2项是要让内容页中的图片也实现懒加载,这可就麻烦了,根据教程说明,图片<img>标签要四大属性:class、data-original、width、height必须同时具备,而在文章页模板里,文章内容的调用就是一个标签[!--newstext--],查看内容页生成的<img>标签,如下:

<img src="/d/file/dbaf87ba13787f770291c0f185ea7ba3.jpg" alt="" />

图片是在后台文章更新时一起添加的,难道要添加时手动写这四个属性塞到[!--newstext--]去么?这是很难坚持做到的,也是易出错笨得不能再笨的做法。

img四大属性皆不全,这个代码要怎么整?

没有找到对应的教程和代码,好在,可以去看已经用jquery.lazyload.js实现懒加载的网站html源代码。

(提示:不要找大站,代码复杂度高,大多抄不了。)

看了好几天和十多家使用了jquery.lazyload.js实现延时懒加载的网站,还终于给找到了可用的实现代码。知道了就简单了。在</head>前加入如下代码:

<script type="text/javascript">
$(function() {
$(".info img").lazyload({
placeholder : "http://www.xueerxing.com/skin/ecms084/images/thumbnail.gif",
effect : "fadeIn"
});
});
</script>

重点在标红的.info img这,大体意思是:基于css的层级关系,这段jquery式的代码会找到class名为info层级下的所有图片,对它们施加魔法作用力(.lazyload()方法)。

魔法作用力

以下是网页html中的css上下包含层级。

<div class="info bgb">
<div class="info-bt">
<h1 class="title">东方神话“老干妈”—陶华碧创造并守护的企业王国经管之道</h1>
<small> <span> <i class="fa fa-user"></i></span> <span> <i class="fa fa-rss"></i> </span><span> <i class="fa fa-clock-o"></i>2018-03-16</span> </small> </div>
<div class="info-zi mb15"><p>&nbsp;有一个东方的神话,不做推销,不打广告,没有促销,坐在家门口,经销商就来抢货。不上市、不贷款、不融资。别的企业到处找贷款,拉融资,想上市,老干妈却多次拒绝政府的融资建议。在互联网上,出国党们将&ldquo;老干妈&rdquo;的公司创始人陶华碧女士成为&ldquo;国民女神&rdquo;,在中国8、9块钱一瓶的老干妈辣酱,外国要达到十几美元,留学生依然选择去超市买回&ldquo;家的味道&rdquo;。</p>
<p><img src="/d/file/56545b7963a442d530fb5557bf3bc5e8.jpg" _src="http://admin3.cnad.cn/ueditor/net/upload/2018-03-15/622f2570-e399-4b3f-a6bd-57e1560bc8f9.jpg" alt="" /></p>
<p>图片来源于网络</p>

.............</div></div>

只要你的图片<img>标签是在info层级下,就会被这段代码施加魔法,且无需为<img>标签添加任何额外的属性。

太好了,如法泡制。例如首页的列表式图文,只需改动<img>所归属的class名(用.号),或id名(用#号)。如下:

<script type="text/javascript">
$(function() {
$(".notice img").lazyload({
placeholder : "http://www.xueerxing.com/skin/ecms084/images/thumbnail.gif",
effect : "fadeIn"
});
});
</script>

真是极简实用啊。完全不需要对文章内容中的<img>元素做啥子改变!

本文是帝国cms+jquery.lazyload.js实现图片延迟懒加载的极简方法,那有没有最简的呢,应该是有。

在jquery.lazyload.js的一些教程中,说这样设置就会将所有的img的并且拥有data-original标签的图片更改为懒加载。

 

html代码

<img alt="" width="640" height="480" data-original="img/example.jpg" />

js代码

<script type="text/javascript">

$(function() {
$("img").lazyload();
});

</script>
以上这个最简方法华哥没有尝试过,想必是没有啥子问题。只是这种不问青红皂白的滥施魔法,会不会有些太粗暴了!

粗暴执法

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注