前言

有一个朋友问我这个问题,刚好有时间,现在就简单的写个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. [Xcode 实际操作]六、媒体与动画-(3)使用CoreImage框架设置图片的单色效果

    目录:[Swift]Xcode实际操作 本文将演示如何使用图片框架,将图片转换成单色样式. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  2. 前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）

    一个H5页面的基本结构是什么 我么在编辑器中输入html:5可以得到 <!DOCTYPE html> <!-- 声明文档类型 --> <html lang="e ...

  3. 基于SpringBoot构建分模块项目

    前言 步骤过于详细,多图慎入!!! 假设一个场景,要开发一个4s店维修部的办公系统,其功能有:前台接待,维修抢单,财务结算,库存管理.于是我们创建一个项目balabalabala写完交工. 一段时间后 ...

  4. 集合之ArrayList,HashSet,HashMap

    结合框架的体系结构: 一.List(列表) 1. List的特点 (1)List是元素有序并且可以重复的集合,称为序列 (2)List可以精确的控制每个元素的插入位置,或删除某个位置的元素 (3)Li ...

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

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

  6. NET Core Hosting

    ASP.NET Core 运行原理解剖[1]:Hosting   ASP.NET Core 是新一代的 ASP.NET,第一次出现时代号为 ASP.NET vNext,后来命名为ASP.NET 5,随 ...

  7. JS——三种嵌入页面的方式

    一 行间事件 二 页面script标签嵌入 三 外部引入 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. SpringBoot---Web开发---SSL配置

    1.[生成证书] 2.[SpringBoot配置SSL] 3.[http转向https]

  9. 关于AQS——独占锁的相关方法（一）

    一.序言 Lock接口是juc包下一个非常好用的锁,其方便和强大的功能让他成为synchronized的一个很好的替代品. 我们常用的一个Lock的实现类(好像也是唯一一个只实现了Lock接口的类) ...

  10. undefined is not a function

    具体报错 TypeError: c:\Users\Administrator\WebstormProjects\blogtest\views\index.ejs:1 >> 1| <% ...