-
前端实现图片懒加载,提高用户体验
2018-01-16 14:49:11惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的...定义
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。
惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。实现
懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。
判断是否存在于可视区
-
浏览器视口高度
-
待加载资源距离视口顶端位置
通过以上两点即可判断图片是否位于可视区内。
之后获取图片的真实地址var nodes = document.querySelectorAll('img[data-src]'), elem = nodes[0], rect = elem.getBoundingClientRect(), vpHeight = document.documentElement.clientHeight; if(rect.top < vpHeight && rect.bottom>=0) { console.log('show') }
把真实地址赋给图片<img src="loading.gif" alt="" data-src='1.gif'> ... <script> var src = elem.dataset.src; </script>
完整代码如下var img = new Image(); img.onload = function(){ elem.src = img.src; } img.src = src;
转载来源:http://blog.csdn.net/Magneto7/article/details/55518784var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight; function lazyload(){ var nodes = document.querySelectorAll('img[data-src]'); Array.prototype.forEach.call(nodes,function(item,index){ var rect; if(item.dataset.src==='') return; rect = item.getBoundingClientRect(); if(rect.bottom>=0 && rect.top < viewH){ (function(item){ var img = new Image(); img.onload = function(){ item.src = img.src; } img.src = item.dataset.src item.dataset.src = '' })(item) } }) } lazyload(); scrollElement.addEventListener('scroll',throttle(lazyload,500,1000)); function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; } else { timeout = setTimeout(fun, delay); } }; };
-
-
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2020-11-29 18:02:27目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下。...这样子对于页面加载性能上会有很大的提升,也提高了用户体验。 原理 将页面 -
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2020-11-30 19:51:05惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,... -
前端如何实现图片懒加载(lazyload) 提高用户体验
2018-12-12 17:19:09定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候...惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定...定义
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。实现
懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。判断是否存在于可视区
浏览器视口高度
待加载资源距离视口顶端位置
通过以上两点即可判断图片是否位于可视区内。var nodes = document.querySelectorAll('img[data-src]'), elem = nodes[0], rect = elem.getBoundingClientRect(), vpHeight = document.documentElement.clientHeight; if(rect.top < vpHeight && rect.bottom>=0) { console.log('show') }
之后获取图片的真实地址
<img src="loading.gif" alt="" data-src='1.gif'> ... <script> var src = elem.dataset.src; </script>
把真实地址赋给图片
var img = new Image(); img.onload = function(){ elem.src = img.src; } img.src = src;
完整代码
var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight; function lazyload(){ var nodes = document.querySelectorAll('img[data-src]'); Array.prototype.forEach.call(nodes,function(item,index){ var rect; if(item.dataset.src==='') return; rect = item.getBoundingClientRect(); if(rect.bottom>=0 && rect.top < viewH){ (function(item){ var img = new Image(); img.onload = function(){ item.src = img.src; } img.src = item.dataset.src item.dataset.src = '' })(item) } }) } lazyload(); scrollElement.addEventListener('scroll',throttle(lazyload,500,1000)); function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; } else { timeout = setTimeout(fun, delay); } }; };
-
前端如何实现图片懒加载(lazyload) 提高用户体验
2018-12-12 17:19:09定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候...惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定...定义
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。实现
懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。判断是否存在于可视区
浏览器视口高度
待加载资源距离视口顶端位置
通过以上两点即可判断图片是否位于可视区内。var nodes = document.querySelectorAll('img[data-src]'), elem = nodes[0], rect = elem.getBoundingClientRect(), vpHeight = document.documentElement.clientHeight; if(rect.top < vpHeight && rect.bottom>=0) { console.log('show') }
之后获取图片的真实地址
<img src="loading.gif" alt="" data-src='1.gif'> ... <script> var src = elem.dataset.src; </script>
把真实地址赋给图片
var img = new Image(); img.onload = function(){ elem.src = img.src; } img.src = src;
完整代码
var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight; function lazyload(){ var nodes = document.querySelectorAll('img[data-src]'); Array.prototype.forEach.call(nodes,function(item,index){ var rect; if(item.dataset.src==='') return; rect = item.getBoundingClientRect(); if(rect.bottom>=0 && rect.top < viewH){ (function(item){ var img = new Image(); img.onload = function(){ item.src = img.src; } img.src = item.dataset.src item.dataset.src = '' })(item) } }) } lazyload(); scrollElement.addEventListener('scroll',throttle(lazyload,500,1000)); function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; } else { timeout = setTimeout(fun, delay); } }; };
-
懒加载提高页面性能
2018-03-21 22:48:55可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。二、如何实现懒加载 1. 将页面中的图片的src属性设置为空,并将src属性真正的值存放在自定义属性data-originnal(自定义属性以data-开头)。...一、什么是懒加载?
懒加载,就是延迟加载。针对于多图片的页面,只有当该图片出现在页面视区中时,再加载该图片。。可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。
二、如何实现懒加载
1. 将页面中的图片的src属性设置为空,并将src属性真正的值存放在自定义属性data-originnal(自定义属性以data-开头)。
2.为页面中的图片设置好大小,防止引起页面的回流,影响性能。
3.判断元素是否进入用户视野中。(利用元素的offsetTop属性与 scrollTop、clientTop之间的关系判断)。若进入视野,则将 data-original属性的值赋给图片的src属性
4. 滚动,重复判断元素是否进入视野。
三、具体实现:
1.设计HTML
<img data-original="mogu.jpg" alt="" class="picture" src="" >
2.判断元素是否进入视野
if(scrollTop+height>offsetTop){ var img = new Image(); //跨域异步请求图片 img.onload = function () { console.log(1); item.src = img.src; } img.src = item.dataset.original; //获取自定义对象的属性 }
四、完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyload</title> <style> #pictures{ width: 900px; border: 1px solid #ccc; overflow: hidden; } .picture{ float:left; width:250px; height:250px; margin: 10px 20px; border:1px solid #ccc; } </style> </head> <body> <div id="pictures"> <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > <img data-original="mogu.jpg" alt="" class="picture" src="" > </div> <script> var images=document.getElementsByTagName('img'); function lazyload() { Array.prototype.forEach.call(images,function(item,index) { var height=document.documentElement.clientHeight; var scrollTop=document.documentElement.scrollTop; var offsetTop=item.offsetTop; if(scrollTop+height>offsetTop){ var img = new Image(); img.onload = function () { item.src = img.src; } img.src = item.dataset.original; } }); } lazyload(); //第一次加载页面时需要自动加载 document.addEventListener("scroll",lazyload); </script> </body> </html>
五、代码中的基础问题以及解决方法
1.判断是否进入可视区
2.获取自定义的属性
1.通过element.dataset.original.
语法:
基本上最新的浏览器都支持,对于低版本的浏览器兼容性不好。
对于 element.dataset的详细使用,参考链接点击打开链接
对于如何兼容低版本的浏览器,请参考 我的文章 ,实现兼容版本的element.dataset。
2.通过 document.getAtrribute(“data-original”);
兼容性好
六、代码的其他问题
判断元素是否在可视区域时,会重复判断元素,造成浪费。
七、使用echo.js库实现预加载
echo.js使用原生js编写,不需要依赖其他库。可独立使用。(lazyload是jquery插件,使用时必须引入jquery,功能完善)
1. 下载并引入echo.js。
<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>
2.设置图片的自定义属性为data-echo
3. 使用:获取元素并调用init()方法。接收一个对象。对象参数如下。
offset:图片在可视区域下方一段距离时,开始加载
throttle:图片延迟多少毫秒后加载。
unload:是否卸载在可视区域外面的图片。默认为false。
echo.init({ offset:0, throttle:0, unload:true, callback:funtion(element,op){ } });
-
怎样优化大量图片的加载,提高用户体验
2017-02-28 23:36:001、图片懒加载:在页面的未可视区域,可以添加一个滚动条事件,判断图片到浏览器顶端的距离如果小于到低端的距离,优先加载。...4、先加载一张不清晰的缩略图,以提高用户体验。(微博上好像会经常看到)... -
viewpager懒加载
2018-09-20 22:50:02什么是懒加载:viewpager会默认预加载当前界面左右的fragment,为了防止其他需要预加载并且不可见的fragment与当前可见的fragment在加载数据时抢占cpu和内存资源,预加载的fragment只有当其可见时才去加载数据,这样... -
懒加载
2016-11-28 20:14:48网站性能优化的插件,提高用户体验。 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。 第二:使用场合 涉及... -
图片懒加载
2020-12-06 23:00:33** 对于图片过多的页面,为了加速页面的加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载,等到滚动到可视区后再去加载,这样子对于页面加载性能上会有很大的提升,也提高了用户体验。... -
vue 懒加载
2019-05-06 13:59:20像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以... -
java实现懒加载_Vue实战051:各种懒加载技术实现
2020-12-30 08:36:10懒加载懒加载(Load On Demand)也称之为延迟加载,是一种按需加载加载组件的数据获取方法,当用户滚动页面的时候自动获取更多的数据,这样不仅缩短了系统响应时间,也提升了系统性能,更提高了用户的体验感同时最大... -
JavaScript中的预加载和懒加载
2018-05-05 17:17:12在网页中合理使用预加载和懒加载有效地减少用户的等待时间,提高用户体验。 目录 页面加载过程 预加载 懒加载 该篇博客参考以下文章总结而成: Javascript图片预加载详解 懒加载和预加载的... -
原生图片懒加载
2020-09-08 22:07:19学习目标: 掌握原生图片懒加载 学习内容: 1、 掌握原生图片懒加载 2、 分析js代码 3、 搜索熟悉陌生单词用法 4、 掌握懒加载 ...懒加载是一种优化网页性能的一种方式,它极大的提高了用户的体验。举 -
vue懒加载
2021-01-12 17:59:44提高用户体验 import Vue from "vue"; import VueRouter from "vue-router"; import login from "./login"; import store from "../store/"; import commodityManage from "./commodityManage"; import selfAgent ... -
js懒加载
2019-09-29 07:09:20在我们展示过多图片的时候,类似于淘宝的图片有很多,全部从服务器请求会给用户带来糟糕的体验,所以为了提高用户体验,下拉逐渐加载。 每个图片的src都会有一个get请求,我们把不能看到的图片src设置相同的图片,...
-
C++基础教程之日期和时间
-
Brave浏览器加入Filecoin生态,加速推动商业落地
-
PW1555-2.0.pdf
-
2021-01-22
-
XnConvert-win安装包
-
ProBuilder快速原型开发技术
-
PW2163-2.0.pdf
-
2021-01-22
-
30个生涯锦囊,带你跳出迷茫,找到适合你的职业方向
-
python数据分析基础
-
Python学习入门:从变量到异常处理
-
Laya 2.0 开发3D小游戏 入门教学
-
linux系统中对文件的检索操作(查找字符,查找字符所在行,删除行)
-
设计模式之代理模式
-
前端架构师-速成
-
cppreference_zh_jb51.zip
-
全国高铁站点地理位置信息数据
-
云队友丨淘宝加速抖音化
-
【2021】UI自动化测试Selenium3
-
PW2202-2.0.pdf