-
2022-04-09 20:19:12
目录
什么是图片懒加载
当我们访问一个图片展示比较多的网页时,加载速度慢很多时候正是因为图片多导致,大量的img图片导致页面渲染的堵塞。而且若用户只查看了网页的前面部分便离开,许多已经加载却因为处于网页底部而未呈现在视口区的图片,它们极大加重服务器压力但是用户看都没看,白白浪费了性能。为了解决这些的问题,就需要引入图片懒加载,懒加载其实很好理解,重点就是一个‘懒'字。当用户滚动相应可视区域,若可视区域有图片便加载,而在可视区域外未加载过的图片它们先不加载,如果用户滚动可视区域到它们时它们再加载,否则一律不加载。这样一来就大大提高了网页渲染的性能和减少不必要的浪费。
图片懒加载的实现
原理
我们可以通过用图片的上端到视口上端的距离和视口高度作比较,如果小于视口高度,那么说明图片在视口中,所以这个图片就要加载,反之则不加载
实现过程
首先我们给img标签加上h5的自定义属性,自定义属性以data-开头,目的是为了保存并能使用数据,例如
<img data-src="./1.png" alt="">
这样就给img标签加上了自定义属性,并将1.png保存在里面
然后我们通过js来判断视口和图片的关系
let imgs = document.querySelectorAll('img') //获取所有的图片标签 window.addEventListener('scroll',function(){ //给页面添加滚动事件 imgs.forEach(item => { //遍历所有的图片标签 let imgTop = item.getBoundingClientRect().top //获取到图片上端到视口上端的距离 if(imgTop < window.innerHeight){ //如果这个距离小于视口宽度,即图片在视口中 let src1 = item.getAttribute('data-src') //将自定义属性获取出来 item.setAttribute('src',src1) //然后将自定义属性赋值给src属性 } }) })
这样就实现了图片的懒加载
另一种方式
Intersection Observer
更多相关内容 -
vue实现图片懒加载的方法分析
2020-11-21 10:00:14本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考,具体如下: vue图片懒加载使用 首先第一步,安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad... -
angular实现图片懒加载实例代码
2021-01-19 19:34:24这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上。这里主要谈谈在使用插件的过程遇到的一些问题。 一)我使用的是... -
vue指令实现页面图片懒加载鼠标滚动图片开始加载
2021-12-01 15:55:29图片出现在视口区域时,进行图片加载 1、节省带宽 2、提高页面加载速度 -
详解性能更优越的小程序图片懒加载方式
2021-01-03 08:07:48懒加载或者可以说是延迟加载,针对非首屏或者用户”看不到”的地方延迟加载,有利于页面首屏加载速度快、节约了流量,用户体验好 实现方式 传统H5的懒加载方式都是通过监听页面的scroll事件来实现的,结合viewport的... -
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2020-11-27 23:35:26在vue中使用图片懒加载详细指南,分享给大家。具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。 使用方式 使用vue... -
JS实现图片懒加载(lazyload)过程详解
2020-11-20 23:50:55对于图片较多的页面,使用懒加载可以大幅提高页面加载速度,提高用户体验。 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当... -
快速实现JS图片懒加载(可视区域加载)示例代码
2020-11-28 19:02:12js懒加载图片 如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片。而并不是等到整张页面... -
微信小程序图片懒加载.zip
2020-03-23 15:51:27微信小程序图片懒加载,防止微信列表上拉加载,下拉加载时小程序闪退,白屏,屏幕闪动,小程序崩坏,图片懒加载解放微信小程序这些图片列表多产生的问题 -
原生JS实现图片懒加载之页面性能优化
2020-10-17 02:48:49在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。这篇文章主要介绍了页面性能优化原生JS实现图片懒加载 ,需要的朋友可以参考下 -
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2020-09-18 15:37:24主要介绍了Python爬虫图片懒加载技术 selenium和PhantomJS解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
Vue实现一个图片懒加载插件
2020-12-12 12:23:16这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件。 Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use()。其实... -
js前端实现图片懒加载(lazyload)的两种方式
2020-10-19 23:48:45本篇文章主要介绍了js前端实现图片懒加载(lazyload)的两种方式 ,使用图片懒加载可以提高网页运行速度,有兴趣的可以了解一下。 -
微信小程序实现图片懒加载的示例代码
2020-08-28 13:26:24本篇文章主要介绍了微信小程序实现图片懒加载的示例代码,实现的原理是通过页面预加载图片,对用户体验度会有一定的提高,具有一定的参考价值,有兴趣可以了解一下 -
JS图片懒加载的优点及实现原理
2020-11-26 21:41:07这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 图片懒加载优势: 增强用户体验 优化代码 减少http的请求 ... -
原生JS实现图片懒加载(lazyload)实例
2020-12-09 18:18:30图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。 实现原理 加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的... -
html图片懒加载
2018-04-24 11:37:42echo.js图片懒加载,亲测可用,插件也比较小,使用起来挺方便的 -
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2020-11-30 19:51:05图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 惰性加载是程序人性化的一种体现,提高用户体验,防止一次... -
Vue自定义图片懒加载指令v-lazyload详解
2020-08-30 16:49:17主要为大家详细介绍了Vue自定义图片懒加载指令v-lazyload,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
图片懒加载svg-loading图片
2018-11-18 14:08:10loading-svg图片,使用方法见https://blog.csdn.net/xyphf/article/details/84197748 -
html5+js(支持手机页面)图片懒加载
2018-09-20 14:03:28HTML图片懒加载,亲测可用,插件也比较小,使用起来挺方便的.根据jquery 提供的 lazyload.js 插件实现图片懒加载,demo 在最下面。 lazyLoading.js 可以缓解庞大项目的网络压力lazyLoading.js图片懒加载 -
图片懒加载imgLazyLoading.js使用详解
2020-10-18 20:41:29主要为大家详细介绍了图片懒加载imgLazyLoading.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
js实现图片懒加载效果
2020-10-19 13:05:53主要为大家详细介绍了js实现图片懒加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
解析javascript图片懒加载与预加载的分析总结
2020-10-21 06:01:43本篇文章介绍了javascript图片懒加载与预加载的分析,详细的介绍了懒加载和预加载的问题,有需要的可以了解一下。 -
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2020-08-30 20:30:09主要介绍了MUI 解决动态列表页图片懒加载再次加载不成功的bug问题,解决方法很简单的,需要的朋友可以参考下 -
Javascript实现图片懒加载插件的方法
2020-10-21 07:08:40最近由于公司项目需要,要利用Javascript实现图片懒加载效果,尝试起来发现并不难,于是将自己的实现过程分享出来给大家学习和参考,希望对有需要的朋友们带来一定的帮助,感兴趣的朋友们下面来一起看看吧。 -
javascript瀑布流式图片懒加载实例解析与优化
2020-10-22 19:38:25主要针对javascript瀑布流式图片懒加载实例进行解析与优化,感兴趣的小伙伴们可以参考一下
收藏数
40,766
精华内容
16,306