主页 > 建站相关 > dede相关 >

dede织梦图片懒加载怎么做

2018-08-27 17:22 阅读:58 来源:智宇SEO自媒体

  网站打开速度也是是影响seo排名的一个关键词因素了。优化网站打开速度也是最简单的增加百度对网站的评分。手机端智宇做了MIP,打开速度当然不要操心了。而PC端因为历史遗留问题,利于首页打开速度的优化很多没有做。影响网页打开速度的无非是css,js,图片大小等。所以如果首页加载很都图片,而且图片很大的话,最好要做个图片懒加载。图片懒加载可以很明显的缩短网页的打开速度。虽然智宇博客首页图片不多。但最好也做下图片懒加载。

dede织梦图片懒加载怎么做

  那么,dede织梦图片懒加载怎么做?

  下载一个图片加载中的,gif动画图。

  智宇去网上找了一个,还挺好的懒加载git图

  地址http://www.shenhuangji.com/images/lazyload.gif

  浏览器打开,然后右键另存为到本地电脑。

  1. 上传懒加载js库

  懒加载js库网很多,用智宇找到的也行

  地址:http://www.shenhuangji.com/templets/default/js/lazyload.min.js

  同样浏览器打开,右键另存为到本地。注意图片和js不要直接用智宇的链接,不然智宇博客无法访问的时候,你的网站也挂了。

  2. 修改你要实现懒加载的<img>标签代码

   <img  class="lazy"   src="你的懒加载gif图片地址" data-original="你缩率图地址" alt="" >


       例子:

        智宇要改的是首页主体的图片懒加载。所以找到相关的代码修改

 <img class="lazy" src="http://www.shenhuangji.com/images/lazyload.gif" data-original="[field:picname/]" alt="[field:title /]" >  

       3. 模板底部加入懒加载js库

  页面必须先调用jquery,确保jquery代码在下面代码之前。

  然后在页面底部加入下面代码

<script src="你的lazyload.min.js地址"></script>   
   <script type="text/javascript">
    $(function () {
        $(".lazy").lazyload();
    })
</script>

  4.更新下首页就可以看到懒加载的效果啦。