建站资讯

帝国cms+jquery.lazyload.js实现图片延迟懒加载极简方

作者:admin 发布时间:2020-08-03
SEO技术博客 ↬ 帝国教程↬帝国cms+jquery.lazyload.js实现图片延迟懒加载极简方法 帝国cms+jquery.lazyload.js实现图片延迟懒加载极简方法

华言巧语【帝国教程】℃快速评论

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



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


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


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


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


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


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


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



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


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


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


下载链接:skin/ecms084/js/jquery.lazyload.min.js


(jquery.lazyload.js取决于jquery,如果网站没有用到jquery,那立即下载jquery.js,下载链接:skin/mon.js)


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


script src=”/skin/mon.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 >

div >

?=$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 : “skin/ecms084/images/thumbnail.gif”,


effect : “fadeIn”


});


});


/script


< img这,大体意思是:层级下的全部图片,对它们施加魔法作用力(.lazyload()方法)。



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


div >

div >

h1 >

small span i >

div >

p img src=”/d/file/56545b7963a442d530fb5557bf3bc5e8.jpg” _src=”/upload//622f2570-e399-4b3f-a6bd-57e1560bc8f9.jpg” alt=”” / /p


p 图片出处于网络 /p


…………. /div /div


如果你的图片 层级下,就会被这段代码施加魔法,且无需为 img 标签添加任何额外的属性。


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


script type=”text/javascript”


$(function() {


$(“.notice img”).lazyload({


placeholder : “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


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


- END -

浏览完了?你能点我去评论留下观点!

网站上传图片代码帝国

版权所属:SEO技术博客,未经授权 禁止转载!

帝国Cms7.5零食类商城微信

演示地址p> 登录网站的后台e/admin/ 进入后台栏目 =》增加自定页面 =》选择直接页面,页面名称为:sitmap,文件夹名称修

一个帝国cms 项目的实施分

有一个项目想仿某某学校网,看了一下那个网址,通过模板文件名称和地址可以确定这个网站是帝国CMS做的。 网站功能设计

帝国cms导航当页面高亮

关于帝国cms制作的网站,当页面导航高亮的实现方法,在华哥过去的这篇博文中(见:jquery实现帝国cms当前导航高亮的实践

收缩