知识点：

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. OSI协议与TCP\IP协议之间的关系

    OSI协议 TCP\IP协议 五层协议(学习参考) 应用层 应用层 应用层 表示层 会话层 运输层 运输层 运输层 网络层 网络层 网络层 数据链路层 网络接口层 数据链路层 物理层 物理层 基于五层 ...

  2. 'vue' 不是内部或外部命令

    运用cnpm淘宝镜像安装vue-cli,然后输入vue,显示“'vue' 不是内部或外部命令”,然后百度查找方法,解决办法如下: 虽然电脑是64位的电脑,然后node我也下载安装的是64位,然后,我重 ...

  3. django_rest framework 接口开发（二）

    1 a. 认证 - 仅使用: from django.views import View from rest_framework.views import APIView from rest_fram ...

  4. HTML的BODY内标签介绍

    一.基本标签 <body> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线& ...

  5. apache Directory Studio 简易使用

    apache Directory Studio 简易使用 本文首发:https://www.somata.work/2019/apacheDirectoryStudioSimpleUse.html 以 ...

  6. 修改虚拟机磁盘uuid

    cd 到这个目录: C:\Program Files\Oracle\VirtualBox> ####  sethduuid 后为 路径+文件名. VBoxManage internalcomma ...

  7. 再战css

    1.盒模型的属性: 1.padding .box{ width: 200px; height: 200px; background-color: red; /*顺时针 上右下左*/ padding: ...

  8. Robot Framework--接口测试中常见的四种POST方式

    写接口测试用例时,遇到以json格式提交数据时,报错,Request如下图: Response如下图: 改成form格式提交,可以正常运行,如下图: 代码如下: ------------------- ...

  9. 19 使用Vue实例的render方法渲染组件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. python_反射：应用

    class User(object): def denglu(self): print('欢迎来到登录页面!') def zhuce(self): print('欢迎来到注册页面!') def you ...