前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求

什么是懒加载

懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求。通俗的说就是你不要就不给你,怎么地。举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加载速度。因此用懒加载能当滚动到可视区域时才加载当前的图片。

懒加载原理

图片的加载是由src的值引起,当对src赋值时浏览器就会请求图片资源,基于这个,可以利用html5属性data-XXX来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src,这样就能实现图片的按需加载,也就是懒加载了

懒加载优点

提高前端性能,图片在需要的时候才加载,减轻服务的负担,提高页面的加载速度,能够减少带宽。

懒加载实现方式1

使用jquery-lazyload.js,jQuery的插件用于懒加载使用,需要依赖jQuery

jquery-lazyload.js的参数:

threshold :设置Threshold参数来实现滚到距离其xx px时就加载。如:

$(function() {
     $("img.lazy").lazyload({
        threshold :100
    });
})

placeholder :为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏,比如放一些等待加载的图片来优化用户体验效果。不设置设个参数,使用css背景图来实现也是可以的,如实例中就是使用背景图的方式替代这个参数

$(function() {
     $("img.lazy").lazyload({
        placeholder: "images/loading.gif"
    });
})

event :触发定义的事件时,图片才开始加载(此处click代表点击图片才开始加载,还有mouseover,sporty,foobar(…))

$(function(){
      $("img.lazy").lazyload({
            event : "click"
      });
})

effects :图片显示时的效果,默认是show。

$(function(){
      $("img.lazy").lazyload({
          effects:"fadeIn"
      });
})

container :值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

$(function(){
        $("img.lazy").lazyload({
            container: $("#container")
        });
 })

failure_limit :一般用于当页面中图片不连续时使用,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内,插件默认情况下在找到第一张不在可见区域的图片时停止循环。如:

 $(function(){
        $("img.lazy").lazyload({
           failure_limit : 20
    });
})

这里设为20表示插件找到 20 个不在可见区域的图片时才停止搜索。

skip_invisible :为了提升性能,插件默认忽略隐藏的图片;如果想要加载隐藏图片.设置skip_invisible为false;

 $(function(){
        $("img.lazy").lazyload({
            skip_invisible : false
    });
})

实现步骤:

第一步:引入:在HTML中引入jQuery和jQuery-lazyload

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

第二步:图片中不使用src属性,因为使用src属性后就会默认发送请求请求图片,使用data-original代替如

<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">

第三步:添加jQuery代码

<script type="text/javascript">
    $(function() {
        $("img.lazy").lazyload();
    })
</script>

整体实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .title {
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
        .container {
            margin: 0 auto;
            width: 800px;
            box-shadow: 0 0 5px #ccc;
            overflow: hidden;
        }
        .box {
            margin: 0 auto;
            margin-top: 300px;
            width: 300px;
            background-image: url(http://ry-yuan.me/lazyload-demo/images/loading.gif);
            background-repeat: no-repeat;
            background-position: 85px 45px;
        }
        .lazy {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p class="title">图片懒加载演示(jquery-lazyload.js)</p>
    <div class="container">
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p1.jpg"></div>
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p2.jpg"></div>
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p3.jpg"></div>
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p4.jpg"></div>
    </div>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("img.lazy").lazyload({
                effect: "fadeIn",  // 图片出现效果
                threshold: 0,       //距离其xx px时就加载。
                //event: "click", // 添加事件
                failure_limit: 20  //// 找到 20 个不在可见区域的图片时才停止搜索
            });
        })
    </script>
</body>
</html>

懒加载实现方式2

使用echo.js:专门用于实现懒加载

echo只有两个可选参数:

offset:离可视区域多少像素的图片可以被加载

throttle:图片延时多少毫秒加载

第一步:引入:在HTML中引入jQuery和jQuery-lazyload,如:

<script type="text/javascript" src="js/echo.min.js"></script>

第二步:图片中的src使用data-echo代替如:

<img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300">

第三步:添加js代码:

echo.init({
      offset: 500,   //离可视区域多少像素的图片可以被加载
    throttle: 1000  //图片延时多少毫秒加载
});

整体实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .title {
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
        .container {
            margin: 0 auto;
            width: 800px;
            box-shadow: 0 0 5px #ccc;
            overflow: hidden;
        }
        .box {
            margin: 0 auto;
            margin-top: 300px;
            width: 300px;
            background-image: url(http://ry-yuan.me/lazyload-demo/images/loading.gif);
            background-repeat: no-repeat;
            background-position: 85px 45px;
        }
        .lazy {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p class="title">图片懒加载演示(echo.js)</p>
    <div class="container">
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p1.jpg"></div>
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p2.jpg"></div>
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p3.jpg"></div>
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p4.jpg"></div>
    </div>
    <script type="text/javascript" src="http://ry-yuan.me/lazyload-demo/js/echo.min.js"></script>
    <script type="text/javascript">
        echo.init({
            offset: 0, //离可视区域多少像素的图片可以被加载
            throttle: 500 //图片延时多少毫秒加载
        });
    </script>
</body>
</html>
时间: 08-15

前端性能优化--图片懒加载(lazyload image)的相关文章

前端优化-图片懒加载

一.什么是懒加载 懒加载技术(简称lazyload)是对网页性能优化的一种方案.lazyload的核心是按需加载,避免网页打开时加载过多资源,让用户等待太久,在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域).这里我们主要是对img标签使用懒加载技术,使用jquery的query.lazyload.js库实现. 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览

前端性能优化 - 资源预加载

转帖: https://css-tricks.com/prefetching-preloading-prebrowsing 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patrick Hamann 的解释: 预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可

Hibernate 性能优化之懒加载

针对数据库中的大数据,不希望特别早的加载到内存中,当用到它的时候才加载 懒加载分为:类的懒加载.集合的懒加载.单端关联的懒加载 类的懒加载    1.在默认情况下,类就是执行懒加载        2.只有使用了load方法以后才能用懒加载    3.如果在相应的映射文件中,设置<class>的lazy="false"懒加载将失去效果集合的懒加载     1.针对一多对的情况或者多对多的情况    2.根据一方加载set集合,决定在什么时候给set集合填充数据        

前端性能优化技术(一):图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyload</title> </head> <body> <div> <a href="#"><img class="lazy" src="imag

图片预加载与图片懒加载的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

js图片懒加载

<script type="text/javascript"> var lazyLoad = { // 获取元素到页面顶部的距离 getoffsetTop: function(elem){ var offTop = 0; while(elem != null){ offTop += elem.offsetTop; // 获取元素到其上一级元素顶部的距离 elem = elem.offsetParent; // 元素的上一级元素 } return offTop; }, //

设计模式(节流模式-----图片懒加载)

昨天把节流模式写了下,今天来个节流模式的应用----图片懒加载(图片延迟加载) 废话不多说,直接懒加载代码吧!哈哈 1 //创建懒加载对象 @id是将要获取外部容器的id var Lazyload = function(id) { 2 this.container = document.getElementById(id); 3 this.imgs = this.getImgs(); 4 this.init();//初始化 5 } 6 Lazyload.prototype = { 7 //初始化

页面图片懒加载

一.页面滚动加载图片的理解 当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路 当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张

图片懒加载

一.什么是图片滚动加载? 通俗的将就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有在图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来.这就是图片懒加载. 二.为什么要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了.更为要命的是:一上来就发送百八十个请求