私は非常にうまく機能している 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
});
しかし、ドキュメントの準備が整った状態で書かれたプラグインを見たことがなく、これが最善の方法だとは思いません。ここで私の 2 つのコード スニペットの違いと、私の目標を達成するための最良の方法は何かを誰かが説明できますか? 基本的に、イベントがトリガーされたときにローダーグラフィックが適切に中央に配置されるように、画像の適切な寸法が必要です。