零基础学做网站培训介绍

当前位置:

网站图片延迟加载加速网站实现方法

近期有一些学做网站论坛学员学习了建站培训课程之后,自己在做图片网站。令人头痛的是图片网站由于图片太多,网站打开速度是个很大的问题,由于同时加载大量图片,导致网站一直在转,加载不完,严重影响网站打开速度

网站图片延迟加载解决网站打开慢

如果解决拥有大量图片的网站打开速度问题呢?解决方法就是使用图片延迟加载

图片延迟加载原理

图片延迟加载是通过监测浏览者拖动网页的位置,拖动到网页什么位置就加载这个位置的图片,没有拖动到位置的图片就不加载。这样就避免了同时加载大量图片的问题,大大加快网站打开速度。

网站图片延迟加载方法

  1. 首先使用网站图片延迟加载,需要下载jQuery图片延迟加载插件jQuery.lazyload,下载地址:https://pan.baidu.com/s/1VNGUY72j39qLhaG-byqnDg 提取码: me4m
  2. 将下载的jQuery图片延迟加载插件上传到自己网站空间根目录下;并且使用以下的代码引入到自己网站上。
    
    
    <script src="https://www.jq22.com/demo/tuupola-jquery_lazyload/jquery-1.11.0.min.js"></script>
    <script src="网站域名/jquery.lazyload.js"></script>
  3. 在自己网站底部文件,一般是foot.php或者是foot.htm代码里粘贴以下的代码:
    
    
    <script>
    $(function() {
    $("img.lazy").lazyload({
    effect: "fadeIn"
    });
    });
    $("img.lazy").lazyload({
    skip_invisible : false
    });
    </script>
  4. 将网站上的图片代码全部改成以下的格式:
    
    
    <img class="lazy" data-original="图片地址" alt="">
  5. 这样就可以实现图片延迟加载了,不管多少图片,都可以提升网站速度。

相关阅读:

Jquery图片懒加载实现方法

网站图片懒加载如何实现(LazyLoad按需加载)

发表评论

电子邮件地址不会被公开。 必填项已用*标注