画像の表示サイズを動的に変更するjQueryの実装アイデアとコード（修正版）

画像の表示サイズを動的に変更するjQueryの実装アイデアとコード（修正版）_jquery

WBOY

リリース： 2016-05-16 17:07:19

オリジナル

876 人が閲覧しました

背景から送信されるサイズの異なる複数の画像を表示したい場合、画像サイズの一貫性と比率の調整を保証するために、画像の表示サイズを動的に変更する必要があります。検索すると、この機能を実装した jQuery コードが次のようにインターネットから見つかります。このコードは、画像のサイズを特定の範囲内に保つことができます。画像の元のサイズが max* 値よりも大きい場合、表示される画像の幅は等しくなります。

元のコード:

コードをコピーコードは次のとおりです。

$(document).ready(function( ) {
 $('.post img').each(function() {
 var maxWidth = 100; // 画像の最大幅 
 var maxHeight = 100; // 画像の最大高さ 
 var rate = 0 ; // スケーリング率
 var width = $(this).width(); // 画像の実際の幅
 var height = $(this).height(); // 画像の実際の高さ

 // 画像が超ワイドかどうかを確認します
 if(width > maxWidth){
 rate = maxWidth / width; // スケーリング率を計算します
 $(this).css ("width", maxWidth); // 実際の表示幅を設定します。 
 }

 // 画像が非常に高いかどうかを確認します
 if(height > maxHeight){
 rate = maxHeight / height; // スケーリング率を計算します 
 $(this ) .css ("height", maxheight); // 実際の表示の高さを設定します 
 width = width * rate;計算の割合の高さ 
 $ (this) .css ("width" ("width" width * rate); // スケーリング後の高さを設定 
 }
 });
 }) ;

私は JS コードでもこの書き方を使用しています。しかし、さまざまなブラウザで効果をテストしたところ、Chromeブラウザ（Chromeのバージョン番号は10.0.648.204）ではこの書き方が適応できず、画像が元のサイズで表示されてしまうバグが発生することが判明しました。その後、$('.post img').each() のコードが $(window).load() メソッドでラップされ、Chrome ブラウザで正しく表示されない問題が解決されました。では、なぜ Chrome ブラウザでバグが発生するのでしょうか?また、$(document).ready と $(window).load の違いは何でしょうか?

画像リソースがまだ読み込まれていない場合でも、HTML ドキュメントが読み込まれ、DOM の準備ができたときに、ドキュメント準備完了イベントの実行が開始されることがわかりました。ウィンドウのロードイベントは、フレーム、オブジェクト、画像を含むページ全体が読み込まれてから少し遅れて実行されます。この違いから、Chrome ブラウザが $(window).load() メソッドを使用して画像を処理しない場合、画像の読み込みや画像の動的変更を行う js コードの実行順序が不確実であると分析できます。

上記のコードをページに挿入すると、画像の高さを取得するときに幅メソッドが提供されていないことを示すエラーが報告されます

コードをコピーコードは次のとおりです。

var width = $(this).width (); // 画像の実際の幅

var height = $(this).height() // 画像の実際の高さ

変更されたコードは次のようになります:

コードをコピーコードは次のとおりです:

jQuery(window).load(function () {
 jQuery("div.product_info img").each(function () {
 DrawImage(this, 680, 1000);
 });
 });
 function DrawImage(ImgD, FitWidth, FitHeight) {
 var image();
 image.src = ImgD.src;
 if ( image.width > 0 && image.height > 0) {
 if (image.width / image.height > = FitWidth / FitHeight) {
 if (image.width > FitWidth) {
 ImgD.width = FitWidth;
 ImgD.height = (image.height * FitWidth) / image.width;
 } else {
 ImgD.width = image.width;
 ImgD.height = image.height;
 }
 } else {
 if (image.height > FitHeight) {
 ImgD.height = FitHeight;
 ImgD.width = (image.width * FitHeight) / image.height;
 } else {
 ImgD.width = image.width;
 ImgD.height = image.height;
 }
 }
 }
 }