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

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

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

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

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

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

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

在CSS样式中调用外部的CSS文件

        今天去面试,面试官问我如何在CSS样式中调用外部的CSS文件。我可是从来没有遇到过这个问题,我说:“没必要这样啊,你只要在页面文件中引入另一个CSS文件就行了啊。”不过,我真的不知道。我回来查阅了资料,发现使用:

@import url(slider.css);

这句话,写在原来的CSS中,就可以引入外部的CSS文件了。这个效果我个人感觉其实跟是一样的。网上很多的人也说这个import有弊端,例如:

1.加载的时候,link是在加载页面前把css加载完毕,而@import url则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。

2.当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

以上两点就足够证明它的弱小了,所以建议不要使用@import url,而使用link,所以面试的时候面试官问的问题都是特别的欠骂啊。

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/?p=98