前言

有一个朋友问我这个问题,刚好有时间,现在就简单的写个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. 微信公众号授权登录，提示“redirect_uri 参数错误”

    做微信公众号开发授权登录的时候遇到的坑... 后台服务用node,index.js相关代码如下: const oauth = new OAuth(conf.appid, conf.appsecret) ...

  2. Git 分支管理 BUG分支

    BUG分支  廖雪峰 软件开发中,bug就像家常便饭一样.有了bug就需要修复, 在Git中,由于分支是如此的强大,所以, 每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支 ...

  3. Node.js 内置模块crypto加密模块(5) RSA

    RSA加密算法 写在前面: 了解RSA算法的原理请查看下面的文章 一文搞懂 RSA 算法 来源:简书  作者:somenzz 在使用 Node 进行 RSA 加密之前我们首先需要获取RSA公共和私有密 ...

  4. ios 适配问题

    两张图解决

  5. 题解 P1854 花店橱窗布置

    把二维压成一维的DP了解一下... 传送门 (以纪念神经兮兮调了两天的一维DP(刷水题谋财害命)以及感谢学长的帮助@ydnhaha) 显然我们有二维的dp:f[i][j]代表第i盆花放到第j个位置 ; ...

  6. GYM 101933D（最短路、二分、dp）

    要点 非要先来后到暗示多源最短路,求最小的最大值暗示二分 二分内部的check是关键,dp处理一下,\(dp[i]\)表示第\(i\)笔订单最早何时送达,如果在ddl之前到不了则\(return\ 0 ...

  7. Linux Maven install

    1 下载 maven : http://maven.apache.org/download.cgi2 解压 tar -xvf apache-maven-3.3.9-bin.tar.gz3 移到所需目录 ...

  8. Net Core2-JWT

    NET Core2 http://www.cnblogs.com/wyt007/category/1130278.html JWT 设计解析及定制 前言 上一节我们讲述的书如何使用jwt token, ...

  9. XML文件的一些操作

    XML 是被设计用来传输和存储数据的, XML 必须含有且仅有一个 根节点元素(没有根节点会报错) 源码下载 http://pan.baidu.com/s/1ge2lpM7 好了,我们 先看一个 XM ...

  10. ios中 input 焦点光标不垂直居中

    笔记:在ios,如果同时给input设置这种平时我们使字体垂直居中的css写法. 光标会出现,如下图的问题 . 改正方案: 采取不使用line-height的垂直居中方法即可.