懒加载的意义（在线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. docker – 你应该知道的10件事

      容器并不是一个全新的技术,但这并不妨碍Docker如风暴一样席卷整个世界. 如果你在IT圈里,你一定听说过Docker.就算与其他热门技术,如:Puppet/Chef,Hadoop或者MongoD ...

  2. [AlwaysOn Availability Groups] 健康模型 Part 2 ——扩展

    健康模型扩展 第一部分已经介绍了AlwayOn健康模型的概述.现在是创建一个自己的PBM策略,然后设置为制定的归类.创建这些策略,创建之后修改一下配置,dashboard就会自动评估这些策略. 场景, ...

  3. a标签绝对定位，点击区域被图片遮挡（IE下）

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

  4. Xamarin中使用DatePickerDialog的相关问题

    在Xamarin中在使用Datepicker的时候,一般情况下只需要在对应的按钮或其他控件的点击事件中使用如下语句即可完成: EditText etBirthday = FindViewById< ...

  5. Mac OS X上编写 ASP.NET vNext（一）KRE环境搭建

    最新的asp.net vnext已经可以支持在mac上运行了,当然用的是mono.相比linux来说,mac的安装略显繁琐.对于大部分用Windows开发asp.net的程序员来说,初次配置还是很费时 ...

  6. To Java程序员：切勿用普通for循环遍历LinkedList

    ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: p ...

  7. Spring Boot -- 配置切换指南

    一般在一个项目中,总是会有好多个环境.比如: 开发环境 -> 测试环境 -> 预发布环境 -> 生产环境 每个环境上的配置文件总是不一样的,甚至开发环境中每个开发者的环境可能也会有一 ...

  8. Egret 集成第三方库 记录

    引入第三方库pureMVC 这次我们要使用到一个mvc开发框架-pureMVC,熟悉as3的朋友一定也对这个框架不陌生吧.不熟悉的也没关系,这个框架不是这次的主角.我们从 这里 下载pureMVC的T ...

  9. iOS-证书

    1.iOS-证书相关 2.iOS-证书申请 3.iOS-APNS证书申请与使用 4.iOS-App发布证书的申请与使用

  10. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...