JavaScriptを使用して画像の表示サイズを動的に変更するサンプルコード

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

$(document).ready(function() {
     $('.post img').each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100; // 图片最大高度
     var ratio = 0; // 缩放比例
     var width = $(this).width(); // 图片实际宽度
     var height = $(this).height(); // 图片实际高度
   
     // 检查图片是否超宽
     if(width > maxWidth){
         ratio = maxWidth / width; // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio; // 计算等比例缩放后的高度 
         $(this).css("height", height); // 设定等比例缩放后的高度
     }
   
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight); // 设定实际显示高度
         width = width * ratio; // 计算等比例缩放后的高度
         $(this).css("width", width * ratio); // 设定等比例缩放后的高度
     }
 });
 });

さまざまなブラウザで効果をテストしたところ、この書き込み方法は Chrome ブラウザに適応できず、画像が元のサイズで表示されるバグが発生することが判明しました。画像リソースがまだ読み込まれていない場合でも、HTML ドキュメントが読み込まれ、DOM の準備ができたときに、ドキュメント準備完了イベントの実行が開始されることがわかります。インターネット上では、 $(window).load() メソッドでラップすると、Chrome ブラウザで正しく表示されない問題を解決できると言われています。ウィンドウのロード イベントは少し遅れて実行され、それが使用されます。フレームを含むページ全体では、オブジェクトと画像が読み込まれた後に実行が開始されます。この違いから、Chrome ブラウザが $(window).load() メソッドを使用して画像を処理しない場合、画像の読み込みや画像の動的変更を行う js コードの実行順序が不確実であると分析できます。

私が最近取り組んでいる屋内画像モジュールでは、画像サイズの一貫性と比率の調整を保証するために、屋内画像を背景からロードしてページに表示する必要があります。動的に変更され、サイズ変更された屋内画像上に対応する AP の位置が表示されます。ここには 3 つのステップがあります:
1. Ajax リクエストを送信し、ロードする必要がある屋内画像の URL を取得し、DOM を更新し、屋内画像を表示します
2. 画像の表示サイズを動的に変更します
3.屋内画像上の対応する AP の位置座標
最初にこれを行いました:
Ajax リクエストを送信し、return success 関数で画像の表示サイズを動的に変更し、屋内マップ上に対応する AP の位置座標を表示するための Ajax リクエストを送信します。最終的な結果は、画像が元のサイズで表示されることです。私の調整した方法は次のとおりです:
ajax リクエストを送信し、成功関数を返します

var img= new Image();
    img.src = url;
    img.onload = function(){
    // 需要执行的程序
         动态改变图片实现尺寸并发送ajax请求在室内图上显示对应的ap位置坐标
    }

結果の画像はサイズを動的に変更した後に表示されます

以上がJavaScriptを使用して画像の表示サイズを動的に変更するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。