懒加载的意义（在线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. 直播推流端弱网优化策略 | 直播 SDK 性能优化实践

    弱网优化的场景 网络直播行业经过一年多的快速发展,衍生出了各种各样的玩法.最早的网络直播是主播坐在 PC 前,安装好专业的直播设备(如摄像头和麦克风),然后才能开始直播.后来随着手机性能的提升和直播技 ...

  2. Java 中获取类路径 classpath 的方法

    System.out.println("++++++++++++++++++++++++"); String path = System.getProperty("jav ...

  3. Atitit.attilax软件研发与项目管理之道

    Atitit.attilax软件研发与项目管理之道 1. 前言4 2. 鸣谢4 3. Genesis 创世记4 4. 软件发展史4 5. 箴言4 6. 使徒行传 4 7. attilax书 4 8. ...

  4. 解决mysql插入数据时出现Incorrect string value: '\xF0\x9F...' for column 'name' at row 1的异常

    这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表情或者某些特殊字符是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去. 我的解决方案是这样的 1.在mysql ...

  5. 什么是英特尔® Edison 模块？

    英特尔® Edison 模块 是一种 SD 卡大小的微型计算芯片,专为构建物联网 (IoT) 和可穿戴计算产品而设计. Edison 模块内含一个高速的双核处理单元.集成 Wi-Fi*.蓝牙* 低能耗 ...

  6. Jquery EasyUI 开发实录

    有好几年没有用过EasyUI了,最近在外包做的一个项目中新增功能时,又用到了,本以为和按照以前那样用就可以了,可当我真正用的时候,发现许多地方不一样了,就连官网的文档都更新了,最突出的就是不知道什么时 ...

  7. VS2012+EF6+Mysql配置心路历程

    为了学习ORM,选择了EntityFramework,经历了三天两夜的煎熬,N多次错误,在群里高手的帮助下,终于成功,现在将我的心路历程记录下来,一是让自己有个记录,另外就是让其它人少走些弯路. 我的 ...

  8. zerojs! 造出最好的 CMS 轮子

    zerojs是一个基于nodejs.angularjs.git的CMS.在它之上可以继续开发出博客.论坛.wiki等类似的内容管理型系统. 拥抱开发者和社区 层次清晰,高度解耦.前后端即使分开也都是完 ...

  9. 抛弃jQuery：DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  10. python code

    执行动态语句 执行字符串中的代码 http://www.cnblogs.com/fanweibin/p/5418817.html #!usr/bin/env python #coding:utf-8 ...