响应式网站建设视频教程,wordpress get_user_id,模板网站 知乎,seo网络营销课程运营懒加载的概念
懒加载也叫做延迟加载、按需加载#xff0c;指的是在长网页中延迟加载图片数据#xff0c;是一种较好的网页性能优化的方式。在比较长的网页或应用中#xff0c;如果图片很多#xff0c;所有的图片都被加载出来#xff0c;而用户只能看到可视窗口的那一部分…懒加载的概念
懒加载也叫做延迟加载、按需加载指的是在长网页中延迟加载图片数据是一种较好的网页性能优化的方式。在比较长的网页或应用中如果图片很多所有的图片都被加载出来而用户只能看到可视窗口的那一部分图片数据这样就浪费了性能。 如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前可视化区域之外的图片不会进行加载在滚动屏幕时才加载。这样使得网页的加载速度更快减少了服务器的负载。懒加载适用于图片较多页面列表较长长列表的场景中。
懒加载的特点
减少无用资源的加载使用懒加载明显减少了服务器的压力和流量同时也减小了浏览器的负担。提升用户体验: 如果同时加载较多图片可能需要等待的时间较长这样影响了用户体验而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文件的加载会影响网站应用的正常使用。
懒加载的实现原理
图片的加载是由 src 引起的当对 src 赋值时浏览器就会请求图片资源。根据这个原理我们使用 HTML5 的data-xxx 属性来储存图片的路径在需要加载图片的时候将 data-xxx 中图片的路径赋值给src这样就实现了图片的按需加载即懒加载。 注意data-xxx 中的 xxx 可以自定义这里我们使用data-src来定义。 懒加载的实现重点在于确定用户需要加载哪张图片在浏览器中可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时获取图片的真实地址并赋值给图片即可。 使用原生 JavaScript 实现懒加载 知识点 window.innerHeight 是浏览器可视区的高度 document.body.scrollTop document.documentElement.scrollTop 是浏览器滚动的过的距离 imgs.offsetTop 是元素顶部距离文档顶部的高度包括滚动条的距离 图片加载条件 img.offsetTop window.innerHeightdocument.body.scrollTop; 代码实现
