JavaScript加载请求图片完成之后再进行其他操作的onload方法

    在工作中遇到了一个问题:用户点击一个链接之后出现弹出框,然后在弹出框中显示图片,这些图片的大小不一,有可能会超过弹出框的宽度,所以需要预先获得图片的长宽比,然后对图片的大小进行修改。

    这个是一个AJAX请求,请求过来的是图片的url,JavaScript需要在图片加载完成之后才会获得图片的大小信息的,所以,修改图片大小操作的函数需要在图片加载完成之后才能执行,否则就会出现获取不到图片长宽信息出现错误的现象。

    最开始的时候,我想到的方法是使用setTimeOut,在执行修改图片大小的函数之前等200ms,这样可以保证图片加载进来,但是这样的方法如果遇到网速很慢的情况的时候还是会出现获取不到图片的信息现象,而且就算网速正常,200ms的等待我们肉眼也能感觉得到那图片的位置和大小在变化。

    后来,发现JavaScript的onload()可以完成这个任务,onload事件是当一个页面或是一张图片加载完成时被触发的。所以,在请求的img标签里面添加一个onload事件:

<img src="url" onload="imgOnload()" />

    其中imgOnload()是对图片进行修改大小的函数,这样我的问题就解决了。

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/928.html

发表评论