我编写了一个jquery插件,它工作得非常好,但我遇到了一些跨浏览器问题,特别是在尝试获取图像元素的高度和宽度时。
以下代码未在Chrome中提取正确的imgHeight,它返回0.
(function($){
$.fn.sideLoad = function(data){
//some variables we will need
var imgHeight = $(this).children('img').height();
var imgWidth = $(this).children('img').width();
var loaderHeight = (imgHeight/2)-16 ;
var loaderWidth = (imgWidth/2)-16;
var $target = $(this);
//do some other processing
};//end function
})(jQuery);
所以,我知道最有可能发生的事情是我需要等待DOM准备好拉出适当的高度和宽度数字。因此,如果我将代码更改为下面的代码,则可以正常工作:
$(document).ready(function(){
$.fn.sideLoad = function(data){
//some variables we will need
var imgHeight = $(this).children('img').height();
var imgWidth = $(this).children('img').width();
var loaderHeight = (imgHeight/2)-16 ;
var loaderWidth = (imgWidth/2)-16;
var $target = $(this);
//do some other processing
};//end function
});
但是,我从未见过使用文档编写的插件作为其中的一部分,我只是不认为这是最好的方法。有人可以解释我的两个代码片段之间的差异以及实现我的目标的最佳方法是什么?基本上我需要图像的适当尺寸,以便在触发事件时加载器图形正确居中。