前言

有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~

github | https://github.com/wangyang0210/bky/tree/picLoadLazy

内容

本来说，不说原理的，但是想想还是简单说下吧。当然现在这种图片懒加载的插件也不少，引用起来也很方便，

原理

  1. 懒加载是什么？

    懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

  2. 为什么使用懒加载 ?

    1. 节省用户流量，提升用户的体验度

    2. 提高页面性能，减小浏览器的负担

    3. 减少无效加载，减轻服务器的压力

  3. 懒加载原理

    图片的加载是由src的值引起的，当对src赋值时浏览器会请求图片资源，所以，我们利用html5的属性'data-src'来保存图片的路径，当我们需要加载图片的时候才将data-src的值赋予src，就实现图片的按需加载，也就是懒加载了

  1. 设置图片的宽高
  2. 获取到可视窗口
  3. 计算首屏展示数
  4. 绑定到滚动事件
  5. 判断加载临界点

代码

<!DOCTYPE html>

<html lang="cn">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #imglist{

            width: 100%;

            margin: 0 auto;

        }

        #imglist img{

            width: 600px;

            height: 350px;

            background: url('./imgs/loading.gif') no-repeat 50% 50%;

        }

    </style>

</head>

<body>

    <h1>下滑加载图片</h1>

    <hr>

    <div id="imglist">

        <img data-src="./imgs/Meinv001.jpg">

        <img data-src="./imgs/Meinv002.jpg">

        <img data-src="./imgs/Meinv003.jpg">

        <img data-src="./imgs/Meinv004.jpg">

        <img data-src="./imgs/Meinv005.jpg">

        <img data-src="./imgs/Meinv006.jpg">

        <img data-src="./imgs/Meinv007.jpg">

        <img data-src="./imgs/Meinv008.jpg">

        <img data-src="./imgs/Meinv009.jpg">

        <img data-src="./imgs/Meinv010.jpg">

        <img data-src="./imgs/Meinv011.jpg">

        <img data-src="./imgs/Meinv012.jpg">

        <img data-src="./imgs/Meinv013.jpg">

        <img data-src="./imgs/Meinv014.jpg">

        <img data-src="./imgs/Meinv015.jpg">

        <img data-src="./imgs/Meinv016.jpg">

    </div>

    <script>

    var imgs = imglist.getElementsByTagName('img');

    // 获取 imglist 的宽度

    var box_width = imglist.offsetWidth;

    // console.log(box_width);

    // 获取视口的高度

    var view_height = document.documentElement.clientHeight;

    // console.log(view_height);

    // 计算横着能加载图片的张数

    // var x_number = 舍去取整(box宽 / img宽)

    var x_number = Math.floor(box_width / imgs[0].offsetWidth);

    // console.log(x_number);

    // 首屏图片的数量

    // Math.ceil((视口高 - 首图的顶部偏移量) / 图片高) * 横向图片数量

    var first_number = Math.ceil((view_height - imgs[0].offsetTop) / imgs[0].offsetHeight) * x_number;

    var m = 0;// 总记录数

    loadImage(m, first_number);

    m += first_number;

    // 绑定滚动事件

    window.onscroll = function() {

        if (m >= imgs.length) return;

        // 滚动条滚动距离

        var top = document.body.scrollTop || document.documentElement.scrollTop;

        // 未加载的第一张图片到顶部的偏移量

        var img_top = imgs[m].offsetTop;

        // 判断加载临界点

        if ((top + view_height) >= img_top) {

            loadImage(m, x_number);

            m += x_number;

        }

        // console.log(top , " : ", img_top);

    }

   // 开始加载,加载到第几张

    function loadImage(start, length) {

        for (var i = start; i < (start+length); i++) {

            if (i >= imgs.length) return;

            (function(i){

                setTimeout(function () {

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

                }, 500);

            })(i);

        }

    }

    </script>

</body>

</html>

效果图

JavaScript——图片懒加载的更多相关文章

  1. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  2. js, javascript 图片懒加载 实例代码

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

  3. Javascript图片懒加载

    懒加载的意义 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 懒加载的实现 1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟. 2.第二种是条 ...

  4. javascript原生图片懒加载

    一,原生javascript图片懒加载 1. 使用方法,例如 // 要绑定的图片地址 <img data-src={url} alt=" "> 2. 在页面中引入下列原 ...

  5. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  6. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  7. JavaScript之图片懒加载的实现

    图片懒加载指的是在浏览过程中随着需要才被加载出来,例如某宝上面浏览商品时,会伴随很多的图片,如果一次全部加载出来的话,显然资源有些浪费,并且加载速度也会相对降低,那么懒加载的实现很重要.即随着浏览翻阅 ...

  8. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

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

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

随机推荐

  1. iscsi使用教程

    服务端 服务器环境 已经安装过qemu-img的32位ubuntu $ uname -a Linux ubuntu-virtual-machine 3.13.0-46-generic #76-Ubun ...

  2. header元素 footer元素 hgroup元素

    header元素 header元素是一种具有引航和导航作用的结构元素, 通常用来放置整个页面或页面内的一个内容区块的标题, 但是也可以包含其他内容, 例如数据表格,搜索表单, 或相关的logo图片 h ...

  3. 笔记-JavaWeb学习之旅18

    AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和XML 异步和同步:客户端和服务器端相互通信的基础上 同步:客户端操作后必须等待服务器端的响应, ...

  4. jsp网站访问次数统计

    JSP 点击量统计 有时候我们需要知道某个页面被访问的次数,这时我们就需要在页面上添加页面统计器,页面访问的统计一般在用户第一次载入时累加该页面的访问数上. 要实现一个计数器,您可以利用应用程序隐式对 ...

  5. STP-7-RSTP的BPDU格式和处理方式的改变

    RSTP只使用一种BPDU,协议版本字段为2(STP为0). STP标志字段8位只使用了两位:TC(拓扑变化)和TCA(拓扑变化确认). RSTP也使用了其余6位:提议位,端口角色位,学习位,转发位, ...

  6. 上传、裁剪图片-----Jcrop图片裁剪插件

    Jcrop文档:http://code.ciaoca.com/jquery/jcrop/C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/293 ...

  7. 洛谷1373（dp）

    常规线性dp,需要时就加一维.\(dp[i][j][t][s]\)表示在点\((i,j)\)时瓶子里剩\(t\)且为\(s\)走(0代表小a,1代表uim)时的方案数. de了半天发现是初次尝试的快速 ...

  8. CodeForces - 851B -Arpa and an exam about geometry（计算几何）

    Arpa is taking a geometry exam. Here is the last problem of the exam. You are given three points a,  ...

  9. Restful 1 -- REST、DRF(View源码解读、APIView源码解读)及框架实现

    一.REST 1.什么是编程? 数据结构和算法的结合 2.什么是REST? - url用来唯一定位资源,http请求方式来区分用户行为 首先回顾我们曾经做过的图书管理系统,我们是这样设计url的,如下 ...

  10. 前端CSS(3)

    前端基础CSS(3)   一.文本属性和字体属性(常用的) 1.文本属性 text-align:left|right|center|justify(两端对齐,只适用于英文);   /*对齐方式*/ c ...