JavaScript——图片懒加载

Stella981
• 阅读 661

前言

有一个朋友问我这个问题,刚好有时间,现在就简单的写个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="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv001.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv002.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv003.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv004.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv005.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv006.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv007.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv008.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv009.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv010.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv011.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv012.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv013.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv014.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/imgs/Meinv015.jpg">
        <img data-src="https://my.oschina.net//u/4305056/blog/3488615/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——图片懒加载

JavaScript——图片懒加载

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这