10分钟实现图片懒惰加载

直接上code 注释

<!DOCTYPE htm><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title></title><style>/*消除css默认的间距 方便控制*/* { margin: 0;padding:0}li {height:800px;list-style:none;            /* https://www.jianshu.com/p/e2eb0d8c9de6 */box-sizing: border-box;border:1px solid #000000}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 = 0; 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);}, 500);}}};window.onload = method.imgOnload();//滚动事件window.onscroll = method.scollImg(method.imgOnload);})();
</script>
</body>
</html>

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

转载于:https://www.cnblogs.com/y112102/p/10109427.html

10分钟实现图片懒惰加载相关推荐

dw自动滚动图片_3分钟搞定图片懒加载
什么是图片懒加载图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页). 为什么需要懒加载对于一个页面 ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？
一.与image组件有关的技术问题 1.1 什么是WebP? webp是image组件的一个boolean属性,开启这个属性之后,代表url可以设置webp这种格式的图片.webP是一种同时提供了有损 ...
面试题系列(10)：一个大型电商网有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？...
A. 图片懒加载,滚动到相应位置才加载图片.原理是这个可以用js监控滚动的位置,当初图片位置出现或者即将出现在可视区域时,进行加载. B. 图片预加载,如果为幻灯片.相册等,将当前展示图片的前一张和后 ...
PC端、移动端(手机端)图片懒加载方法整理
1.PC端图片懒加载: jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们 ...
“懒”的妙用——浅析图片懒加载技术
1.定义图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
python怎么加载图片-python爬虫--图片懒加载
图片懒加载是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...
template与图片懒加载
曲线救国的三种案例第一种:underscore.js的图片懒加载 1 <script id="t2" type="text/template"> ...
JavaScript判断图片是否加载完成的三种方式
一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
Python：图片懒加载技术
一. 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import reques ...
selenium截图模糊_Selenium截屏图片未加载的问题解决--【懒加载】
需求: 截屏后转PDF. 问题: selenium截屏后,图片未加载如下图: 原因: 网站使用了懒加载技术:只有在浏览器中纵向滚动条滚动到指定的位置时,页面的元素才会被动态加载. 什么是图片懒加载? ...

10分钟实现图片懒惰加载

10分钟实现图片懒惰加载相关推荐

最新文章

热门文章

10分钟 实现图片懒惰加载

10分钟 实现图片懒惰加载相关推荐

最新文章

热门文章

10分钟实现图片懒惰加载

10分钟实现图片懒惰加载相关推荐