【Emlog教程】图片懒加载特效通用代码,让你的网站更加生动 - 爱优奇博客

【Emlog教程】图片懒加载特效通用代码,让你的网站更加生动

作者: 小君

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

教程介绍

今天群里有个小伙说本站PC端的懒加载特效是怎么弄得。,本人用的是Emlog程序meta模板。

晓超做得懒加载需要下拉才能看到效果。我代码替换了。

怎么替换下个教程我发出来【meta模板懒加载替换已发布】!!!效果如下(两种加载图片)

 
ceshi(1).pngceshi.png

 

c34b1568470478.png

不多说太多废话了,本次教程适合Emlog全部模板通用。借用小洋的懒加载教程修改而成。主要是在图片

前面加上懒加载图片,简称“预加载图片”说的有点太官方了哈。教程开始

 

教程开始

1、在模板目录下找到底部文件footer.php编辑打开后找到</body>标签,在标签前面加入如下代码

下载js文件“echo.js”上传到根目录(文末下载)

 

  1. <!--lanj-->
  2. <script src="http://你的域名/echo.js"></script>
  3. <script>
  4. echo.init({
  5. offset: 100,
  6. throttle: 250,
  7. unload: false,
  8. callback: function (element, op) {
  9. console.log(element, 'has been', op + 'ed')
  10. }
  11. });// ***图片懒加载***//
  12. </script>
  13. <!--lanj-->

 

2、在模板目录找到header.php文件编辑打开后也是在</body>标签前面加入如下代码

 

  1. <script src="http://你的域名/echo.js"></script>

 

3、在图片<img src=标签后面加入以下代码,懒加载图片在文末下载上传到根目录或者其他目录。仔细看操作

 

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

 

(1)原来的图片代码是下面这样的

 

  1. <img src="<?php echo $img_url;?>" height="168" width="150" style="border: 0;max-width:150px;"/></a>

 

(2)加入懒加载代码后是这样的

 

  1. <img src='http://你的域名/lazyload.gif' data-echo="<?php echo $img_url;?>" height="168" width="150" style="border: 0;max-width:150px;"/></a>

 

懒加载图片下载

以上教程对于没有一定知识的新人站长来说可能会有难度,多看几遍就会了,知识都是用脑洞和时间学起来的。meta模板的用户不会的话直接忽略以上操作

meta用户实在不会操作的,就只是要那张懒加载图的把下面图片下载后重命名为“lazyload.gif”上传到meta模板下的images文件里面即可实现。想加载速度快些出来的看下期替换懒加载教程

10211568470159.gif

10211568471738.gif

 


 

 

以上教程到此结束,看不懂的多看几遍。写作水平有限,已经尽量写的透彻了!真的实在不会的下方留言或者加Q群834587670有偿帮你解答弄好

本文为爱优奇网转载文章,搬砖请大佬们留个链接,谢谢!!!码字不易

文件下载

附件:js文件. js

文件大小:

更新时间:2019.9.16

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享到:
打赏
未经允许不得转载:

作者: 小君, 转载或复制请以 超链接形式 并注明出处 爱优奇博客
原文地址: 《【Emlog教程】图片懒加载特效通用代码,让你的网站更加生动》 发布于2019-9-16

评论

未显示?请点击刷新
  1. #1
    领域小斯 游客 Lv.1

    版权都改了 表情

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

 

【Emlog教程】图片懒加载特效通用代码,让你的网站更加生动

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏