一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 + 图片标签及样式文件中的引用的图片加载完成(多媒体内容相似)大体为document加载完成的时间,咱们在引入的js文件中动态改变(如增长)图片的操做不计为document的加载时间。
以下图:javascript

红线右边的图片资源是在页面初始时请求服务器动态加载进来的,它不在document完成时红线标志的范围之内。html
浏览器加载图片资源是一个等待事件,同ajax访问,document加载同样。
咱们知道javascript是非阻塞式的执行代码,它会跳过等待事件执行后面的代码,这就意味着在图片资源加载的等待事件中你捕捉不到相应的图片dom元素,由于执行时图片还未加载进来。java
浏览器为了解决等待事件的弊端,为每种等待事件都会设置一个事件完成时的回调函数,以便于开发者能对等待加载进来的内容加以操做。以动态加载图片为例,浏览器中有一个类为Image,咱们能够经过该类new出一个 dom元素,代码以下:ajax
var img = new Image(); img.src = './img/demo.png'; img.onload = function () { console.log(this); }
这样一个图片资源就被加载进来了,而且能够对其进行操做。浏览器