周松松博客

【网站优化】适用于大部分网站的图片懒加载代码教程

178人参与|2019年09月17日 07:07

相信很多站长朋友应该都知道网站运营,第一个必备条件就是网站加载速度要做好。就好比一个延迟100ms的网站与一个延迟10ms的同行网站相PK,当某个用户访问时,你觉得一个等了半天进不去的和一个点击就进去的网站相比,TA会选择哪一个呢?同行之间都是有竞争的。

IMG_20190917_024504.jpg

所以呢,网站图片懒加载适用于新手站长资金不太充足、而又不会做优化的情况下的救命稻草。一个新手基本买不起高额的优质服务器!只能从这方面下手减轻网站加载速度。下面我们教程开始吧。适用于大部分主流程序,本次教程就拿Emlog基于个人博客建站程序来演示吧,本人也是一名Emlog爱好者。

教程开始

1、下载“echo.js”文件上传到根目录或者其他目录即可。

下载地址:  https://www.lanzous.com/i6687qd

2、上面完成后我们到Emlog的模板目录下找到底部脚本文件“footer.php”编辑打开后在标签前面加入如下代码。(其他程序找对应文件,不一定是footer.php)

3、放置好代码后还没好,还有最后一步。继续往下看!在网站所有的图片<img src=标题后面加入下面的代码。

'http://你的域名/lazyload.gif' data-echo=

不懂怎么加的看下面,原有的网站图片代码基本都是下方这样的。

<img src="图片地址" width="100%" height="40" alt="" title="" align="" /></a></div>

加入懒加载图片代码后:

<img src='http://你的域名/lazyload.gif' data-echo="图片链接" width="100%" height="40" alt="" title="" align="" /></a></div>

4、懒加载图片下载

下面我会打包加载图片,上传到根目录或者其他目录即可,上传其他目录对应好上面加载图片代码即可。觉得图片不好看也可自行去搜寻更好的加载图片命名为“lazyload.gif”即可。

好了,本次的网站图片懒加载教程就到此结束了,预祝各位站长早日成功崛起。


本文来源:  https://www.oukyl.com/post-3124.html


来源:周松松博客,转载请保留出处和链接!

博客圈站长交流群:571334199 (千人群)

必填

选填

选填

◎已有 4 人评论,微信:ZL520199741,QQ:2512897973

  
    
1楼济南做网站  2019-09-18 10:32:57

济南网站设计过来看看,太棒了

Windows 7 x64Windows 7 x64 Google Chrome 63.0.3239.132Google Chrome 63.0.3239.132
订阅  回复
1楼周松松  2019-09-24 20:25:42

贵站也不错

OPPOOPPO Google Chrome 70.0.3538.80Google Chrome 70.0.3538.80
订阅  回复
2楼成都摩天城堡  2019-09-17 11:36:45

好东西,收藏了

Windows 7 x64Windows 7 x64 Google Chrome 69.0.3497.100Google Chrome 69.0.3497.100
订阅  回复
2楼周松松  2019-09-24 20:25:34

要收藏在心里哈

OPPOOPPO Google Chrome 70.0.3538.80Google Chrome 70.0.3538.80
订阅  回复