前言

有一个朋友问我这个问题,刚好有时间,现在就简单的写个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. Codeforces Round #459 (Div. 2):D. MADMAX(记忆化搜索+博弈论)

    题意 在一个有向无环图上,两个人分别从一个点出发,两人轮流从当前点沿着某条边移动,要求经过的边权不小于上一轮对方经过的边权(ASCII码),如果一方不能移动,则判负.两人都采取最优策略,求两人分别从每 ...

  2. 3dmax导出缩放

    参考 http://blog.dou.li/unity3d-import-3dmax-model-scale.html http://blog.csdn.net/pdw_jsp/article/det ...

  3. Codevs 1444 “破锣摇滚”乐队

    1444 “破锣摇滚”乐队   题目描述 Description 你刚刚继承了流行的“破锣摇滚”乐队录制的尚未发表的N(1 <= N <= 20)首歌的版权.你打算从中精选一些歌曲,发行M ...

  4. 升级了git版本后git clone报ssl错误的解决方法

    由于升级了git版本,git clone 的时候报了如下的错误 fatal: unable to access 'https://github.com/open-falcon/falcon-plus. ...

  5. php追加数组的问题

    PHP数组合并两种方法及区别 如果是关联数组,如下: 代码如下: $a = array( 'where' => 'uid=1', 'order' => 'uid', ); $b = arr ...

  6. JS高级学习历程-15

    昨天内容回顾 面向对象的私有成员.静态成员 私有成员:在构造函数里边定义局部变量,就是私有成员. 静态成员:在js里边,函数就是对象,可以通过给函数对象声明成员方式声明静态成员. 原型继承 关键字:p ...

  7. linux设置重启

    crontab -e 0 6 * * * reboot service crond restart

  8. ZROI WC Round5 题解

    ZROI WC Round5 题解 Problem A 题意 给定一个长度为 \(n\) 的序列,操作是交换两个相邻的数,要求将序列变成先单调不降再单调不升,求最小操作数,注意可以完全单调不降或者完全 ...

  9. StatusCodePagesMiddleware中间件如何针对响应码呈现错误页面

    StatusCodePagesMiddleware中间件如何针对响应码呈现错误页面 StatusCodePagesMiddleware中间件与ExceptionHandlerMiddleware中间件 ...

  10. mysql 无法启动 unkown command

    1. https://serverfault.com/questions/490656/mysql-not-starting-error-usr-sbin-mysqld-unknown-option- ...