图片预加载和懒加载的多种方法

图片预加载和懒加载

图片懒加载

在渲染页面的时候，先将图片用一张默认图片代替，当图片到达浏览器可视区域时，才显示真实的图片。

这样的好处是，可以减缓服务器负担，加快初始界面的渲染速度。

实现方式：

使用setTimeOut或setInterval定时器进行延迟加载
条件加载，符合条件或触发事件后再进行异步下载
通过滚动条监听用户距图片距离，快要到达之前进行加载

// 通过滚动条监听用户距图片距离，到达进行加载let img = document.querySelector('img')function lazyLoad(){let viewHeight = document.documentElement.clientHeightlet scrollTop = document.documentElement.scrollTop// 判断图片是否进入可视区if(img.offsetTop < viewHeight+scrollTop){var url ="https://himg.bdimg.com/sys/portraitn/item/46ecf7f5"img.src = url}}window.addEventListener('scroll',lazyLoad)

图片预加载

与懒加载相反，先将图片提前加载到缓存，用户一打开页面就能快速呈现图片。

好处是，遇到一些较大的图片时，可以避免页面慢慢渲染。但是服务器负担会增大。

实现方式：

css的background元素会自动预加载

// 预加载的图片不能使用dispaly:none隐藏，只能将其宽高设为0或者移到看不见的地方<style>li{list-style: none;}#img {background-image: url('https://himg.bdimg.com/sys/portraitn/item/46ecf7f5');width: 0;height: 0;  }</style><body><li id="img"></li><button>点击展示</button><script>let btn =  document.querySelector('button')let li = document.querySelector('li')btn.addEventListener('click',function(){let myImg = document.createElement('img')myImg.src = 'https://himg.bdimg.com/sys/portraitn/item/46ecf7f5'li.appendChild(myImg)})</script></body>

JavaScript则常用new Image()实现

    // 预加载图片路径const urlList = ['https://himg.bdimg.com/sys/portraitn/item/46ecf7f5']function preLoad(){let img = new Image()img.src = urlList[0]// onload是图片加载完成事件img.onload = function(){console.log('图片预加载成功');}}preLoad()

附：网页视图的api

图片预加载和懒加载的多种方法相关推荐

前端项目分析：我是如何做图片优化的（预加载、懒加载和延迟加载）
众所周知:前端页面上的图片是优化时最重要也是最令人头疼的部分,花费了几个月的时间才优化到令自己满意的一半程度,,,唉,一言难尽啊! 在此将几种方法总结一下,希望能帮到不少人吧- 图片的优化有两种方式: ...
img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
超详细的图片预加载和懒加载教程
最近接手一个项目 . 结果光安装依赖都出现了一堆麻烦 . 好不容易处理完一个 , 又来一个 .头疼啊看到之前有一些预加载的学习笔记.于是又查查找找 ,想想写写把预加载和懒加载的笔记写完整发现制 ...
css 同步加载,同步加载，异步加载，懒加载，预加载
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
【vue】预加载、懒加载
项目场景: 提示:记录: 预加载:会在使用之前,提前加载js文件(等其他资源加载完毕,浏览器空闲了,在偷偷加载资源,适用于pc端)兼容性问题严重,caniuse查看是否使用该技术懒加载:当文件需要使 ...
防抖、节流和预加载、懒加载
目录 1. 防抖节流 2. 预加载 3. 懒加载 (一)防抖节流 1. 防抖对于短时间内连续触发的事件(如滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一 ...
ViewPager+Fragment 组合的预加载和懒加载
ViewPager+Fragment 组合的预加载和懒加载转载自http://www.crocutax.com 预加载介绍 ViewPager+Fragment的搭配在日常开发中也比较常见,可用于切 ...
spring预加载与懒加载_通过Spring将继承树加载到List中
spring预加载与懒加载我注意到有趣的Spring功能. 我的一位同事使用它将Spring Bean的整个继承树加载到列表中. 在学习Spring文档时错过了这一点. 让我们来看看Spring b ...

图片预加载和懒加载的多种方法

图片预加载和懒加载

图片懒加载

图片预加载

图片预加载和懒加载的多种方法相关推荐

最新文章

热门文章