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自定义异常问题



快速导航

Copyright © 2016 phpStudy |