懒加载的意义（在线demo预览）

尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是如果图片太多还是会影响页面的加载速度，快则几十秒慢则几十分钟，这样会导致用户流失。

图片的加载对页面的加载速度有很大影响！！所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验，即图片赖加载~

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片赖加载</title>

    <meta name="renderer" content="webkit">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

    <!-- 启用webAPP全屏模式-->

    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- 隐藏状态栏或者设置状态栏的颜色-->

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 忽略数字自动识别为电话号码-->

    <meta name="format-detection" content="telephone=no">

    <!--控制缓存的失效日期 -->

    <meta http-equiv="Expires" content="-1">

    <!-- 禁止转码-->

    <meta http-equiv="Cache-Control" content="no-cache">

    <!-- 禁止缓存访问页面-->

    <meta http-equiv="Pragma" content="no-cache">

    <meta name="applicable-device" content="mobile">

    <!-- 页面关键词-->

    <meta content="" name="keywords">

    <meta name="description" content="">

    <link rel="stylesheet" href="css/img_lazy.css">

</head>

<body>

    <div class="main">

        <img src="" data-src="data:images/1.jpg" alt="">

        <img src="" data-src="data:images/2.jpg" alt="">

        <img src="" data-src="data:images/3.jpg" alt="">

        <img src="" data-src="data:images/4.jpg" alt="">

        <img src="" data-src="data:images/5.jpg" alt="">

        <img src="" data-src="data:images/6.jpg" alt="">

        <img src="" data-src="data:images/7.jpg" alt="">

        <img src="" data-src="data:images/8.jpg" alt="">

    </div>

<!--图片赖加载的JS-->

    <script src="js/imgLazyLoad.js"></script>

</body>

</html>
*{

    margin:;

    padding:;

    box-sizing: border-box;

    list-style: none;

    border:;

    outline:;

}

.main{

    max-width: 640px;

    width: 100%;

    margin: 0 auto;

}

img{

    display: block;

    width: 100%;

    height: 640px;

}
/**

 * Created by Administrator on 2016/11/28.

 */

!function(){

    var imgs = document.getElementsByTagName("img");

    var num = imgs.length;

    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件

        var seeHeight = document.documentElement.clientHeight; //可见区域高度

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度

        for (var i = n; i < num; i++) {

            if (imgs[i].offsetTop < seeHeight + scrollTop) {

                if (imgs[i].getAttribute("src") == "") {

                    imgs[i].src = imgs[i].getAttribute("data-src");

                }

                n = i + 1;

            }

        }

    }

}();

图片的赖加载(lazyLoad)的更多相关文章

  1. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  2. 移动端图片滚动加载-lazyload实现的要点总结

    最近在做移动端的营销页面时,遇到了页面有大量图片的情况,于是很自然的想到了要使用图片lazyload,PC端用着jQuery,也有现成的插件.但是在移动端,基本不用jQuery,于是就试着自己去造一下 ...

  3. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  4. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

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

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  6. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  7. 前端性能优化成神之路--图片懒加载(lazyload image)

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

  8. JS图片赖加载例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

随机推荐

  1. 解决maven下载jar慢的问题(如何更换Maven下载源)

    修改 配置文件 maven 安装 路径 F:\apache-maven-3.3.9\conf 修改 settings.xml 在 <mirrors> <!-- mirror | Sp ...

  2. vim安装中文帮助手册

    安装方法:   在下面的网站下载中文帮助的文件包:$wget http://nchc.dl.sourceforge.net/sourceforge/vimcdoc/vimcdoc-1.5.0.tar. ...

  3. JavaScript

    2015-08-01 16:20 JavaScript使用时需要注意的地方 1.引入JS的位置:最好的做法是把<script>的标签放到HTML文档的最后.</body>标签之 ...

  4. 豪情-CSS解构系列之-新浪页面解构-02

    前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信 ...

  5. 酷酷的CSS3三角形运用

    概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...

  6. iOS开发系列--App扩展开发

    概述 从iOS 8 开始Apple引入了扩展(Extension)用于增强系统应用服务和应用之间的交互.它的出现让自定义键盘.系统分享集成等这些依靠系统服务的开发变成了可能.WWDC 2016上众多更 ...

  7. 2000条你应知的WPF小姿势 基础篇<8-14>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  8. Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888

    Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888 用户名admin  密码aaaaaa 网络摄像机是一种结合传统摄像机与网络技术所产生的新一代摄像机,它可以将影像通过网络传 ...

  9. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  10. undefined

    概述 undefined有多重角色,通常情况下,我们所说的undefined都指的是全局对象的一个属性"undefined". 语法 undefined 描述 在JavaScrip ...