浏览器HTML自带懒加载技术

时间: 2019-09-09阅读: 282标签: 加载

对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:

1、加载初始的 HTML 响应内容
2、加载懒加载库
3、加载图片

假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome 75开始,我们可以通过切换两个开关来手动启用懒加载功能,可能最新的Chrome将会默认开启懒加载功能了,就是说不用我们手动去设置了。(注意这里仅说到了是Chrome浏览器哦)


loading特性的原理:

原生懒加载功能使用了一种预检请求来获取图片文件的前2048字节数据。根据预先取得的数据,浏览器会试着确定该图片的大小,在第一个(如果图片大小小于2KB,一个预检请求就够了)或第二次请求完成后,完整图片一加载完毕,其load事件就会解除监听。

我们可以通过一段脚本来判断浏览器是否支持懒加载功能,如果支持,可直接在img标签中写上loading并设置相关的值即可轻松实现懒加载,loading有三个值,分别是auto(默认值,浏览器自行决定是否启用懒加载)、eager(直接加载该图片)、lazy(开启懒加载)。

使用以下脚本可以判断浏览器是否支持原生懒加载功能:

<script>
if("loading" in HTMLImageElement.prototype){
   alert("支持");
}else{
   alert("不支持,你可能需要引入懒加载库来实现懒加载");
}
</script>

如果支持,我们可以在img标签中为loading指定值:

<img src="" alt="浏览器自行决定是否启用懒加载" loading="auto">
<img src="" alt="浏览器立即加载该图片" loading="eager">
<img src="" alt="浏览器使用懒加载" loading="lazy">


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/5226

前端图片懒加载及节流

懒加载(lazyload)也叫延迟加载, 惰性加载. 实质是当网页页面滚动到相应的地方,对应位置的内容才进行加载显示,这样能明显减少了服务器的压力和流量

vue开发之图片加载不出来问题解决

在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。一、项目打包完成后,打开整体空白

图片资源的预加载

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速

网站设计如何减少页面加载时间

百度将网站的加载速度加入影响排名的因素中,这就是网站设计应该努力减少网站加载时间的重要原因。如果一个电子商务网站每天销售10万元,延迟1秒的页面加载时间可能会导致每年损失250万元

懒加载形式,为什么需要懒加载?

按需加载,即一种在页面加载时延迟加载一些非关键资源的技术。作为网页内容的一部分图像和影像通常需要消耗很多资源加载。在网页优化的过程中,需要避免资源浪费在加载图片和视频上。

IntersectionObserver滚动加载

就是监听根元素与目标元素在指定的交叉比例时触发回调;兼容部分现代游览器(chrome)生产环境中使用,请注意兼容需求;使用场景在一定使用场景可替代onscroll

vue 原生添加滚动加载更多

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度

jquery图片懒加载

对于一个有多个图片的网站来说,访问的时候不应该直接加载所有图片,而是应该只将浏览器窗口内的图片进行加载。当滚动的时候,在加载更多的图片,叫做图片的懒加载。

HTML自带懒加载技术

对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome 75开始

使用Flutter实现58同城中的加载动画

在应用中执行耗时操作时,为了避免界面长时间等待造成假死的现象,往往会添加一个加载中的动画来提醒用户,在58同城中也不例外,而且我们并没有使用系统默认的加载动画,而是制作了一个具有58特色的加载动画。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全