博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【性能优化】---懒加载---
阅读量:5895 次
发布时间:2019-06-19

本文共 432 字,大约阅读时间需要 1 分钟。

001、什么是懒加载

懒加载也就是延迟加载
 
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

 

002、为什么要使用懒加载

很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。有的时候没有必要一次性加载完!详情请看京东

 

003、懒加载实现的步骤

1、将图片地址放在元素的自定义属性中
 
2、当页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在就取出属性值放到src属性中

 

004、懒加载的好处

页面加载速度快,可以减轻服务器的压力,节约流量,用户体验好

 

004、懒加载方案

 

 

 

其他懒加载方式以后再更新

转载于:https://www.cnblogs.com/zly-1209/p/9854916.html

你可能感兴趣的文章
NG-ZORRO-MOBILE 0.11.9 发布,基于 Angular 7 的 UI 组件
查看>>
我就是一个救火员(DBA救援)
查看>>
Centos7安装Gitlab10.0
查看>>
Windows Server 笔记(六):Active Directory域服务:域控制器安装
查看>>
FTP传输文件(hcl模拟器的操作)
查看>>
discuz X3登录流程分析
查看>>
javascript事件响应
查看>>
通过script标签实现JSONP跨域调用
查看>>
用jQuery实现Ajax
查看>>
***微信公众平台开发: 获取用户基本信息+OAuth2.0网页授权
查看>>
上传图片预览
查看>>
vim编辑器
查看>>
程序设计的一些原理
查看>>
iTerm的安装以及配置
查看>>
explore my oracle support using firefox 3.6
查看>>
《社交网站界面设计(原书第2版)》——1.7 反模式的重要性
查看>>
2016上半年DDoS攻击报告:DDoS攻击的规模和攻击频率都在不断攀升
查看>>
混合云、区块链、认知技术,还有哪一样前沿技术是IBM没提到的吗?
查看>>
呼叫中心现场管理人员注意事项
查看>>
nagios监控远程windows服务器
查看>>