img.onload事件和img.complete属性的简介和应用img.onload是当一张图片被加载完成后所触发的事件
实现图片显示功能;
<div>
<img id="img"/>
</div>
js部分:img.src="图片";
img.οnlοad=showImg;
function showImg()
{
代码部分。。。。
}
对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载
过该张图片没有关系,即和缓存没有关系!这里要注意,显示与否和img.style.display无关;
JS部分: alert(img.complete);----->false
img.src="图片";
alert(img.complete);------->//如果上面“图片”获取的时间比JS代码顺序执行的时间要常,那么这里就是false,否则就是true;
//------------------------------------------------------------------
在某些浏览器下面,img加载完成之后, complete的值会变成 false.
所以要继续判断 readyState 状态,才能准确知道img是否onload
1.function imgLoad(img,callback){
2. img.complete || img.readyState == 'loading' || img.readyState == 'complete' ? callback() : img.onload = callback;
3.}
实现图片显示功能;
<div>
<img id="img"/>
</div>
js部分:img.src="图片";
img.οnlοad=showImg;
function showImg()
{
代码部分。。。。
}
对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载
过该张图片没有关系,即和缓存没有关系!这里要注意,显示与否和img.style.display无关;
JS部分: alert(img.complete);----->false
img.src="图片";
alert(img.complete);------->//如果上面“图片”获取的时间比JS代码顺序执行的时间要常,那么这里就是false,否则就是true;
//------------------------------------------------------------------
在某些浏览器下面,img加载完成之后, complete的值会变成 false.
所以要继续判断 readyState 状态,才能准确知道img是否onload
1.function imgLoad(img,callback){
2. img.complete || img.readyState == 'loading' || img.readyState == 'complete' ? callback() : img.onload = callback;
3.}