javascript Image的onload 方法的使用


var img = new Image();
img.onload =function () {
    $('.bg').css('background-image', 'url("'+img.src+'")');
}
img.src="images/bg.jpg";

添加背景图片 这样的写法是否正确? 为什么onload方法要在src之前调用?


//这里只是回调函数赋值给onload属性,并没有调用。
img.onload = function () {
    $('.bg').css('background-image', 'url("'+img.src+'")');
}
//设置img的src后,会开始加载图片
img.src="images/bg.jpg";
/*
等到图片加载完成,才会被浏览器自动调用。
浏览器内部某个地方会自动执行img.onload(event),不需要你手动调用
*/

你是要练习这种用法,还是只是为了添加或替换背景图片。如果只是为了添加,替换背景图片,这样做确实是有那么点复杂~


img.onload 是回调函数,当img载入完成,就执行这个函数,至于onload放在前面的原因,听听一楼的“挺问中原”解释。


也并不都是网速的问题,ie有个版本(忘了哪个了,7-9中),先赋值再绑定事件的话是不起作用的,所以一定要先绑定onload


  • 因为当image的src发生改变,浏览器就会跑去加载这个src里的资源。这个操作是异步的,就是说,js不会傻傻地在原地等待图片的加载,而是继续读代码,直到图片加载完成,触发onload事件,js才会回来执行onload里面的内容。

  • 那么问题来了,假如你家的网速好到爆,比光速还快,或者图片超级小,反正就是,当图片加载的速度快于js解释器阅读代码的速度,然后你的onload是写在.src后面,浏览器还没读onload里面的全部内容就触发了onload事件。。。这就很尴尬了,浏览器根本不知道接下来要做什么,索性就什么都不做。。。所以onload要先写在.src前面,就是先告诉浏览器:待会要是onload,你就执行这些这些,知道了吗?好了,我要放src了,记得onload的时候执行函数啊!



相关阅读:
关于多个页面css样式表问题
androidstudio Execution failed for task
app首页接口需要好多数据,数据要统计许多表的数据,有什么简化方法么?
数据库字段设计了不能为空 还是插入了数据 大神帮我看看为什么?
为什么video标签获取到的对象vedio对象的duration是NAN
关于JS的事件队列问题
bootsrap页面布局需, 横向滚动条显示多个,固定左侧表头
build opencv.sln出错
如何去掉百度地图api中的建筑物名称
一个页面调用同一个modal,返回值问题。
libpython2.7.so是个什么?为什么我用virtualenv创建了新的env之后,这个文件没有多一个?
网站上的付费资源(小说,视频)如何防止爬虫抓取的?
.NET连接oracle实现用户登陆出问题
用ubuntu安装一个程序,请问到这一步以后该怎么做?
WIN7 64位 vs2005新建的BCG工程, 编译时报错无法打开包括文件:“BCGCBProInc.h”
关于项目框架。现在很多项目逻辑都放在前端处理,在选择框架的时候,你们是如何选择的呢?
ios block 置空处理用NULL还是nil
docker-compose.yml可以指定本地镜像吗,我发现去docker.io拉取镜像太慢
新版本Chrome下,trigger('click')上传文件控件后,选择文件弹窗显示太慢?
java自定义异常问题



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 教育局党委“1020”工程建设调研组深入基层学校指导工作 基层机关单位效能风暴行动心得体会 全世界除了你我还能爱谁 我的脸红了600字作文 我是皮皮鲁读后感400字 高级党校培训心得 酒外真意 教师职业道德情况总结 听乐山人弹易水 纷乱的时间是记忆 奶奶家的菜园 2016年度一年级班主任个人总结 俄文简历范文 与岁月无关,与旅途有染 我心目中的家 2015银行述职报告 女孩,千万别做小三 最全毕淑敏经典语录 从《党章》看党的先进性——我的党员先进性教育心得,兼谈“一把手”负责制之弊 为你活的那么累,到底是在装给谁看......... 信用社员工违反规定的检讨书 烟草行业电话行销员竞聘演讲 科技公司财务副经理竞聘演讲辞 星之神1作文400字 你不曾来,我也不曾去过 那一刻 我真失望 短信传经典:分享网友创意的微小说 QQ说说伤感:不是假装沉默,只是无力诉说 高中高一作文900字:狂人三部曲 学会体会人生 国庆节长假作文450字 看图写话 大扫除 戴海鑫 不好意思打扰你 好听的句子个性签名 假如今天没作业作文800字 熊出没之雪岭雄风观后感 品味生活的苦与乐会让你懂得更多 2013年10月精选体育教师工作总结 蓝天作文300字 学做汉堡包 夏雨蒙蒙 青春是一次行走_以青春为话题的作文(精选) 地质灾害培训讲话 我喜欢的老师800字 小学五年级作文600字:发生在大森林里的事 微笑作文1000字 追寻梦的脚步800字 小学五年级作文500字:热爱生命 风云人物大点评作文400字 米饭的观察

Copyright © 2016 phpStudy |