纯JS 10分钟 实现图片懒惰加载
知识点：
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分钟 实现图片懒惰加载的更多相关文章
- 【JavaScript】使用纯JS实现多张图片的懒加载（附源码）
一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
- js 函数的多图片预加载(preload) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- [js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
- JS代理模式实现图片预加载
---恢复内容开始--- 刚刚说了懒加载,现在我们来搞搞预加载吧 预加载的核心: 图片等静态资源在使用前提前请求. 资源后续使用可以直接从缓存中加载,提升用户体验. 几个误区: 预加载不是为了减少页面 ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
随机推荐
- VBA用户自定义函数（十五）
函数是一组可重复使用的代码,可以在程序中的任何地方调用.这消除了一遍又一遍地编写相同的代码的需要.这使程序员能够将一个大程序划分成许多小的可管理的功能模块. 除了内置函数外,VBA还允许编写用户定义的 ...
- 什么是Familywise Error Rate
1.什么是Familywise Error Rate(FWE or FWER) 定义:在一系列假设检验中,至少得出一次错误结论的概率. 换句话说,是造成至少一次Type I Error的概率.术语FW ...
- AJAX with JSP and Servlet（代码）
欢迎任何形式的转载,但请务必注明出处. 本章内容来自YouTube需翻墙(点击进入视频学习) 服务器配置等可以参看我其他文章.注释等后续再加 效果图 结构 <body> <fie ...
- cocos动画没有cc.Sprite.spriteFrame属性
对于新人来说总是有那么多的坑等着你. 新建动画节点的时候千万别[新建空节点]!!! 上面这个就是新建了空的节点,导致没有cc.Sprite.spriteFrame属性. 正确姿势: 粗略试了一下除了空 ...
- python3之面向对象编程理解
面向对象主要有三个特征:封装,继承,多态度. 一.封装 定义类语 class Animal(): class为定义类的关键字,后面跟名字(): python命名规范建议:类一般首字母单词大写,属性变量 ...
- 【vue开发】超简单的防止连续点击js指令方法
vue防重复点击(指令实现) 快速点击按钮会重复多次调用接口,防止出现这样的情况 全局定义,方便调用 新建plugins.js export default { install (Vue) { // ...
- 使用git下载和引进项目流程
1.下载地址https://git-scm.com/download/win 2.idea中加入git插件 Git插件引入 3.复制github中项目地址在idea中打开 4.使用git ...
- 快上车，react 入门拾遗
最近朋友圈和微博都刷了一波杰伦的回忆杀–说好不哭,想想都9012了,在学习react如火如荼的路上,也不妨停下脚步来总结总结,朝花夕拾一下. 为了便于阐述,我们还是来段小明和禅师的故事吧. 小明在学习 ...
- 爬虫：selenium请求库
一.介绍 二.安装 三.基本使用 四.选择器 五.等待元素被加载 六.元素交互操作 七.其他 八.项目练习 一.介绍 # selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requ ...
- Mybatis3.1-[tp_34-35]-_映射文件_select_resultMap关联查询_collection定义关联集合封装规则_collection分步查询_延迟加载
笔记要点出错分析与总结工程组织 1.定义接口 interface DepartmentMapper package com.dao; import com.bean.Department; publi ...