Javascript之图片的延迟加载的实例详解


Posted in Javascript onJuly 24, 2017

Javascript之图片的延迟加载的实例详解

作用:保证页面打开的速度(3s之内打不开页面,就已经算是死亡页面了)

原理:

    1)对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图片需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟时间),再开始加载真实图片

    2)对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片

    扩展:数据的异步加载:开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到对应区域的时候,在重新请求数据,然后绑定渲染数据

首先让img标签中的src为空,让imgdisplay:none;在外面的div上的背景图上面绑定一个背景图片,然后等页面加载完毕之后,在进行加载图片;

使用定时器或者window.onload事件,然后把获取到的url地址绑定到元素img标签上的src上;但是,如果获取的真实图片地址是错误的src地址时,不仅控制台会报错,而且页面会出现碎图/叉子图,影响视觉,以下为处理事件

var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src;

  img.syule.disolay = 'block';

  oImg = null; //释放空标签

 }

网站性能优化:

1、尽量减少向服务器端请求的次数"减少HTTP请求"

2、css/js文件进行合并

3、ICON图片进行合并->雪碧图/css script

4、图片的延迟加载

5、数据的异步加载

6、在移动端,我国做的是一个简单的宣传页,尽量的把css和js写成内嵌式

以上就是Javascript之图片的延迟加载的讲解,如有疑问请留言或者到本站社区交流讨论,共同进步,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
js+css实现导航效果实例
Feb 10 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
js a标签点击事件
Mar 30 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 #Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 #Javascript
想用好React的你必须要知道的一些事情
Jul 24 #Javascript
利用node.js实现反向代理的方法详解
Jul 24 #Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 #Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 #Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 #Javascript
You might like
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
新闻内页-JS分页
2006/06/07 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python中运行并行任务技巧
2015/02/26 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
django 读取图片到页面实例
2020/03/27 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
详解Python IO编程
2020/07/24 Python
python FTP编程基础入门
2021/02/27 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
应届生法律求职信
2013/10/22 职场文书
工程总经理工作职责
2013/12/09 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
疾病证明书
2015/06/19 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python