前言

有一个朋友问我这个问题,刚好有时间,现在就简单的写个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. OVS编译

    下载源码 # git clone https://github.com/openvswitch/ovs.git # cd ovs # git checkout branch-2.8 下载依赖包 # y ...

  2. 微调Inception V3网络-对Satellite分类

    目录 1. 流程概述 2. 准备数据集 2.1 Satellite数据集介绍 3. Inception V3网络 4. 训练 4.1 基于Keras微调Inception V3网络 4.2 Keras ...

  3. Android实现点击两次返回退出APP

    Android实现点击两次退出APP 这两天在做一个项目碰到这么个问题,需要主界面点击两次直接退出整个APP而不是返回上一个界面,查找了网上的资料,整合和修改了一下写了这篇博客. 这里我主要以我的项目 ...

  4. 第七篇 .NET高级技术之关于相等 Equals

    查看判断两个对象是否是同一个对象要用:object.ReferenceEquals(); 因为“==”默认值是比较两个对象是不是同一个对象.所以有时候两个对象的内容相等,但是比较后还是false. O ...

  5. RPC00

    https://mp.weixin.qq.com/s?__biz=MjM5ODI5Njc2MA==&mid=2655824821&idx=1&sn=50fa59165aedc8 ...

  6. python bbs项目代码分析

    def index(request, *args, **kwargs): condition={} type_id = int(kwargs.get("type_id")) if ...

  7. spring boot 参数转换

    参数调用方式: 1. localhost:8080/person/properties/to/json body参数设置: 2. localhost:8080/person/json/to/prope ...

  8. 界面切换动画（CATransition实现 ）

    调用 // CATransition动画实现 [self pushWithAnimationType:@"fade"]; - (void)pushWithAnimationType ...

  9. JSPs only permit GET POST or HEAD的解决方案（REST风格）

    问题:原文链接 https://blog.csdn.net/tiberroot/article/details/76615727 看到很多人解决办法使用 @ResponseBody注解 这个意思是按照 ...

  10. Python文件内容修改

    ''' 吃的文件内容: 过油肉菜 尖椒菜 娃娃菜 ''' import os with open("吃的", mode="r", encoding=" ...