JS踩坑 – 兼容不同浏览器

Chrome和Firefox针对特定的DOM对象,同样的JQ代码,执行的结果可能不一样。

例如: 针对img元素,获取元素的width、height,结果其实是不一样的。

// 获取img元素的宽度
$('img').width();

/*
 * 在chrome中获取的width是图片的可视宽度,而非图片的netural宽度(真实宽度)
 * 在firefox中获取的width是图片的真实宽度而是可视宽度
 * 以上行为的差距就使得在通过获取width来给特定dom元素定位是,
 * 不同的浏览器显示的效果就会不一致
 * 针对以上这种情况需要是用JS的原生方法来获取元素的宽度
 */

//使用querySelectAll获取dom元素,绝大部分的主流浏览器已经支持该方法
Img = document.querySelectorAll('img')[0];
//获取Img对象的可视宽度
visualWidth = Img.clientWidth;
//获取Img的真实宽度
neturalWidth = Img.naturalHeight;


/*
 * 除了以上的问题之外,firefox对js代码的执行会非常快,例如针对img图片元素绑定事件,
 * 如果不检查图片是否完全载入而直接执行代码的话,代码是无法正常运行的,
 * 这一点chrome似乎没有这个问题。
 */

//JQ监听判断图片是否完全载入

$(img).load(function(){
    // Do something.
})