admin 发表于 2014-6-3 20:02

js如何加载完图片再做其他操作

   最近项目中遇到了一个问题:用户点击一个链接之后出现页面要判断图片的高度、根据高度判断展示部分还是全部、但是大的图片在没加载完成后就做判断导致不准确、不能出现所要的效果。
    这个是一个AJAX请求,请求过来的是图片的url,JavaScript需要在图片加载完成之后才会获得图片的大小信息的,所以,修改图片大小操作的函数需要在图片加载完成之后才能执行,否则就会出现获取不到图片长宽信息出现错误的现象。
    最开始的时候,我想到的方法是使用setTimeOut,在执行修改图片大小的函数之前等500ms,这样可以保证图片加载进来,但是这样的方法如果遇到网速很慢的情况的时候还是会出现获取不到图片的信息现象,而且就算网速正常,500ms的等待我们肉眼也能感觉得到那图片的位置和大小在变化。
    后来,发现JavaScript的onload()可以完成这个任务,onload事件是当一个页面或是一张图片加载完成时被触发的。所以,在请求的img标签里面添加一个onload事件:
    <img src="url" onload="imgOnload()" />

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

admin 发表于 2014-6-3 20:03

以上 方法借鉴了某位朋友的 方法 感觉不错 项目正常运行

秘法所 发表于 2016-11-18 16:52

受教了!这个论坛果然很不错,适合学习
页: [1]
查看完整版本: js如何加载完图片再做其他操作