在图片预加载编码的时候看到onload跟complete,思考,onload跟complete有什么区别?测试在chrome环境下。
动手实践,编了一小段简单的测试代码
document.getElementById('load').onclick = function() {
var img = new Image();
img.src="images/1-logo.png";
if(img.complete) {
console.log('dd');
}
img.onload = function() {
console.log('ff')
}
}
可以看到,第一次的时候,仅执行了onload,也就是我们看到的仅打印了‘ff'文字,而接下来的每次点击都会出现“dd”,"ff",这是为什么呢?继续测试,改变位置:
document.getElementById('load').onclick = function() {
var img = new Image();
if(img.complete) {
console.log('dd');
}
img.onload = function() {
console.log('ff')
}
img.src="";
}
点击仅显示dd;
document.getElementById('load').onclick = function() {
var img = new Image();
if(img.complete) {
console.log('dd');
}
img.onload = function() {
console.log('ff')
}
img.src="images/1-logo.png";
}
dd,ff一起显示;
可见事件的执行与位置关系有关,看下onload的解释:
onload表示加载好,换言之,没有加载好不会执行;
再看complete,MDN上的解释:
无论src是否有值,成功与否,只要获取到image,就可以执行,而onload需要图片的加载完全,没有图片也就没有onload,这也就解释了为什么上面的一个案例一直显示“dd”,而没有执行显示“ff”;
那为什么第一个案例,第一次仅显示“ff”呢?Google了,没明白,有懂的人可以帮忙解释下么,在此先行谢过~