700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js 实现图片预加载(js操作 Image对象属性complete 事件onload 异步加载图片)【javascript】

js 实现图片预加载(js操作 Image对象属性complete 事件onload 异步加载图片)【javascript】

时间:2022-04-26 21:26:46

相关推荐

js 实现图片预加载(js操作 Image对象属性complete  事件onload 异步加载图片)【javascript】

web前端|js教程

图片预加载

web前端-js教程

看个例子:

图书管理源码,ubuntu检查系统错误,爬虫网页表格抓取,1000 php,seo5110lzw

<!--

function addImg(isrc)

{

var Img = new Image();

Img.src = isrc;

Img.onload = function ()

{

document.body.appendChild(Img);

}

}

//-->

当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg” 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?

IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 ”onload“ 事件?是缓存机制?

FF、Chrom中,每点击一次加载一张该图片。

绩效系统winform源码,ubuntu命令查看GPU,c 爬虫请求页面,php网线入侵,优化要素seolzw

稍微修改下:

dnf官网源码,vscode环境变量设置,华硕主板ubuntu,宝塔怎么使用tomcat,爬虫目标文件,php ftp获取文件,seo优化六种方式,免费 网站管理系统下载安装,织梦充值页面模板lzw

<!--

function addImg(isrc)

{

var Img = new Image();

Img.onload = function ()

{

document.body.appendChild(Img);

}

Img.src = isrc;

}

//-->

运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件!

联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!)

<!--

var Img;

function addImg(isrc)

{

Img = new Image();

//Img.src = isrc;

Img.onload = function ()

{

alert("complete : "+plete +"\nreadyState : "+Img.readyState)

document.body.appendChild(Img);

}

Img.src = isrc;

}

//-->

经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,这和IE的 readyState 属性的表现一致!

至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?

众所周知,从缓存里加载东西的速度是很快的,那么在

Img.src = isrc;

Img.onload = …

的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?

这回加载一张根本不存在的图片看看效果:

<!--

var Imgttmt;

function addImg(isrc)

{

Imgttmt = new Image();

Imgttmt.src = isrc;

alert("complete : "+plete +"\nreadyState : "+Imgttmt.readyState)

Imgttmt.onload = function ()

{

alert("impossible")

}

}

//-->

可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲,IE、Opera表现正常,complete 始终为 false ;IE的 readyState 始终为uninitialized 。令人疑惑的是FF,其中 plete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的时候 plete 值为 false。而之后 plete 值就一直为 true 了!如果换一张从来没有加载过的图片,FF和Chrom 的行为就一致了,都是一开始加载时, plete 值为false, 之后为 true!

测试的过程中还发现,脚本的执行顺序的确会影响到类似于 onload 等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!基于 javascript 这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。