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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
angularJS提交表单(form)
Feb 09 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Vue切换Tab动态渲染组件的操作
Sep 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
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
js window.event对象详尽解析
2009/02/17 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
校运会广播稿100字
2014/01/27 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
护校行动方案
2014/05/31 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
居委会工作总结2015
2015/05/18 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python