知识点：

1：h5 新增选择器  document.querySelectorAll

2:JS 经典，防抖

3：距离判断：getBoundingClientRect

 思路：通过浏览器滚动事件， 判断图片高度是否出现在可视化范围。 如果ok 赋值图片地址src(默认是空 通常地址隐藏在data-src 中)，

           网上其他实现思路也是同理，实现方式不一样。

复制code保存xx.html：可直接运行看效果

code:

代码已标注详细解释 ，

<!DOCTYPE htm>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        /*消除css默认的间距 方便控制*/

         * { margin: ;

             padding:

         }

        li {

            height:800px;

            list-style:none;

            /* https://www.jianshu.com/p/e2eb0d8c9de6 */

            box-sizing: border-box;

            border:1px solid #

        }

        img {

            display: block;

            margin:100px auto;

        }

    </style>

</head>

<body>

<div>

    <ul class="box">

        <li> <img data-src="img/1.jpg" /></li>

        <li> <img data-src="img/2.jpg" /></li>

        <li> <img data-src="img/3.jpg" /></li>

        <li> <img data-src="img/4.jpg" /></li>

    </ul>

</div>

<script>

    //闭包

    (function() {

        var dom = {

                //h5 新增选择器

                ImgAll: document.querySelectorAll("img")

            },

            method = {

                /**

                 * window.innerHeight 获取页面的高度不包括工具栏和滚动条

                 * 获取图片地址:dom.ImgAll[i].dataset.src

                 * getBoundingClientRect().top 获取到图片到页面顶部的高度

                 */

                imgOnload: function () {

                    //这里可以在细节优化 比如已经加载的图片 判断 src 已经存在 不赋值

                    //或者 赋值完后 在dom.Img 集合里面删除当前元素

                    for (let i = ; i < dom.ImgAll.length; i++) {

                        if (dom.ImgAll[i].getBoundingClientRect().top < window.innerHeight) {

                            dom.ImgAll[i].src = dom.ImgAll[i].dataset.src;

                        }

                    }

                },

                /**

                 * 防抖

                 * 详细介绍 https://blog.csdn.net/crystal6918/article/details/62236730

                 * https://www.2cto.com/kf/201803/728456.html

                 */

                scollImg: function(fn) {

                    let handle;

                    return function() {

                        let context = this;

                        let args = arguments;

                        // 取消之前的延时调用

                        clearTimeout(handle);

                        handle = setTimeout(function () {

                                //apply 改变当前的this 是运行时的context 除暴理解移花接木  此处imgOnload 然并若

                                //http://www.cnblogs.com/onepixel/p/5143863.html 或者阮一峰 博客 js 目录。

                                fn.apply(context, arguments);

                        }, );

                    }

                }

            };

        window.onload = method.imgOnload();

        //滚动事件

        window.onscroll = method.scollImg(method.imgOnload);

    })();

</script>

</body>

</html>

图片缓存 查看 js个人笔记  renderCvs方法

纯JS 10分钟 实现图片懒惰加载的更多相关文章

  1. 【JavaScript】使用纯JS实现多张图片的懒加载（附源码）

    一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...

  2. js 函数的多图片懒加载(lazy) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...

  3. js 函数的多图片预加载(preload) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...

  4. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  5. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  6. JS代理模式实现图片预加载

    ---恢复内容开始--- 刚刚说了懒加载,现在我们来搞搞预加载吧 预加载的核心: 图片等静态资源在使用前提前请求. 资源后续使用可以直接从缓存中加载,提升用户体验. 几个误区: 预加载不是为了减少页面 ...

  7. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  8. 爬虫之图片懒加载技术及js加密

    图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...

  9. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

随机推荐

  1. Html CSS transform matrix3d 3D转场特效

    Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...

  2. jquery sortable的拖动方法示例详解

    转自:https://hb-keepmoving.iteye.com/blog/1154618 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   u ...

  3. 定制ubuntu镜像

    使用ubuntu server 18.04 lts版镜像 作为源镜像定制目标镜像, 工具cubic, 定制目标镜像, 使得一些服务装机后即可使用,例如redis, mysql, monggodb ,s ...

  4. Python查找电话号码归属地、邮编、运营商信息等

    # -*- coding: utf-8 -*- 1. 查找单个电话号码 from phone import Phone def get_phone_info(phone_num): phone_inf ...

  5. Springboot分别使用乐观锁和分布式锁（基于redisson）完成高并发防超卖

    原文 :https://blog.csdn.net/tianyaleixiaowu/article/details/90036180 乐观锁 乐观锁就是在修改时,带上version版本号.这样如果试图 ...

  6. 使用LPCXpresso开发板调试外部的电路板

    MCUXpresso IDE开发环境有一个主要的功能:支持LPC-Link2仿真调试器.通过这种方式,对于基于ARM的电路板,我可以使用这个功能强大的仿真调试器来调试.在NXP的众多LPCXpress ...

  7. jstack、jmc、jhat工具使用详解

    jstack: 在上一次[https://www.cnblogs.com/webor2006/p/10669472.html]jcmd中也可以获取线程的堆栈信息,回顾一下: 其实在JDK中还有另一个专 ...

  8. flutter，flutter版本version/channel切换问题

    flutter go,官方的指南版本如下: 如何设置版本和channel,尝试 flutter help,发现原来flutter version不单是可以查所有版本(--version查当前版本)还可 ...

  9. DT6.0二次最后一次开发插件-手机端熊掌号定时提交

    今天写完这个,就是DT6.0最后开放的插件,因为群里的朋友需要,就写了一个适合DT6的手机端定时插件.不过个人还是喜欢7.0的版本,7.0的插件在上几期分享了,今天就不过多说了! 我这个是初成品,改善 ...

  10. 068_不登陆虚拟机,修改虚拟机网卡 IP 地址

    #!/bin/bash #该脚本使用 guestmount 工具,Centos7.2 中安装 libguestfs-tools-c 可以获得 guestmount 工具#脚本在不登陆虚拟机的情况下,修 ...