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

抄代码｜帝国cms zyload.js实现图片延迟懒加载

极简方法

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

也会影响到搜索引擎对网站的优劣评判及seo。（如上图所示，相比于js等文本类文件，三个红色标注的图片文件，就算

kb更小，加载时间亦要久很多）对于较大型的、有专业程序员配置的网站运营者来说，为网站中的图片实现惰性加载(专业术语，俗称为延迟加载，懒加载)，是一件正常不过的事。毕竟，懒加载不是什么新技术，好几年前就已经在较大的互联网站普及了。那问题来了：什么是懒加载？答：懒加载是一种网页交互呈现效果。通常而言，首次只加载第一屏（能看得见的）的图片，之后的图片则不加载（或只加载一个文件容量特别小的图片，称为占位图），如果用户拖动滚动条

至后面某处位置（这处位置称为可视区域）则再加载图片，这样做的好处是避免网页因加载图片过多而打开慢的弊端。两个字，提速！如果网站图片多，要提速，那懒加载就是web技术层面的标配。提升网站页面加载速度，利于seo提升——懒加载好处看上去很多，只是要如何具体地用在自己

的网站上呢？对于没有专业程序员参与的网站运营管理者

来说，要实现懒加载并不是那么容易。网上有一些教程，厉害的高手是自己写原生js来解决，更多快捷解决方案是使用zyload.js插件，有示例代码及演示（请自行搜索或参见此处链接），这个插件的使用并不难，如果是从零开始构建一个页面，直接套用是没有问题的，可是要套用在帝国cms制作好的网站里，得用什么方式方法呢？经过在学而行营销网的实践摸索，以下是帝国cms结合zyload.js 实现图片延迟懒加载的极简解决方法。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－首先，要下载zyload.js的迷你压缩版，此js文件相当小，只有2k大小。下载地址：

/skin/ecms084/js/zyload .min.js（zyload.js依赖于jquery，如果网站没有用到jquery，那请下载jquery.js，下载地址：

/skin/ecms084/js/common.js）在帝国cms模板的head区域加载此两个js文件，代码如下：确保网站空间里这哥俩已经上传并存在，并检查此两js文件的引用路径是否正确，还有先后顺序不要乱。其次，就是需要一段自定义的js代码来实现懒加载，重点在这。学而行营销网的需求如下：1:首页或列表页的图片式布局实现懒加载；2:网站内容文章里的图片也比较多，最好能实现懒加载；欲

炼神功，必先自宫。菜鸟小白请先参考网上的教程，然后再回来。zyload.js图片延时加载插件使用教程

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

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

4.懒加载插件–

zyload.js简单调用5.织梦dedecms图片加

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

[e:loop={‘news’,10,18,1,’istop=0 and firsttitle=0 an d

isgood=0′,’newstime DESC’}] ” target=”_blank”>” alt=””> ” target=”_blank”> 其中的可以改成：” alt=”” width=”640″ height=”480″ data-original=””>来符合zyload.js的

图片匹配要求。第2项是要让内容页中的图片也实现懒加载，这可就麻烦了，根据教程说明，图片标签要四大属性：class、data-original、width、height必须同时具备，而在文章页模板里，文章内容的调用就是一个标签[!–newstext–]，查看内容页生成的标签，如下：图片是在后台文章更新时一起添加的，难道要添加时手动写这四个属性塞到[!–newstext–]去么？这是很难坚持做到的，也是易出错笨得不能再笨的做法。img 四大属性皆不全，这个代码要怎么整？没有找到对应的教程

和代码，好在，可以去看已经用zyload.js实现懒加载的网站html源代码。（提示：不要找大站，代码复杂度高，大多抄不了。）看了好几天和十多家使用了zyload.js 实现延时懒加载的网站，还终于给找到了可用的实现代码。知道了就简单了。在前加入如下代码：$(function() {$(“.info img”).lazyload({placeholder :

“/skin/ecms084/images/thumbna il.gif”,effect : “fadeIn”});});重点在标红的.info img这，大体意思是：基于css的层级关系，这段jquery式的代码会找到class名为info层级下的所有图片，对它们施加魔法作用力(.lazyload()方法)。以下是网页html中的css上下包含层级。东方神话“老干妈”—陶华碧创造并守护的企业王国经管之道2018-03-16 有一个东方的神话，不做推销，不打广告，没有促销，坐在家门口，经销商就来抢货。不上市、不贷款、不融资。别的企业到处找贷款，拉融资，想上市，老干妈却多次拒绝政府的融资建议。在互联网上，出国党们将“老干妈”的公司创始人陶华碧女士成为“国民女神”，在中国8、9块钱一瓶的老干妈辣酱，外国要达到十几美元，留学生依然选择去超市买回“家的味道”。