ユーザーのブラウザウィンドウに収まるように大きな画像のサイズを変更するJavascriptを作成しています。（残念ながら、ソース画像のサイズは制御していません。）
したがって、次のようなものがHTMLに含まれます。
<img id="photo"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
タグsrc内の画像imgがダウンロードされているかどうかを確認する方法はありますか？
$(document).ready()ブラウザが画像をロードする前に実行すると問題が発生するため、これが必要です。 $("#photo").width()そして、$("#photo").height()プレースホルダ（altテキスト）のサイズを返します。私の場合、これは134 x20のようなものです。
現在、写真の高さが150未満かどうかを確認しており、そうである場合は代替テキストであると想定しています。しかし、これはかなりのハックであり、写真の高さが150ピクセル未満の場合（私の特定のケースではありそうにない）、または代替テキストの高さが150ピクセルを超える場合（小さなブラウザウィンドウで発生する可能性があります）、破損します。 。
編集：コードを見たい人のために：
$(function()
{
var REAL_WIDTH = $("#photo").width();
var REAL_HEIGHT = $("#photo").height();
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(REAL_HEIGHT < 150)
{
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
if(REAL_HEIGHT < 150)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
更新：提案をありがとう。イベントのコールバックを設定すると、イベントが発生しないリスクがある$("#photo").loadため、イメージタグで直接onLoadイベントを定義しました。記録のために、これが私が最終的に使用したコードです：
<img id="photo"
onload="photoLoaded();"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
次にJavascriptで：
//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
isPhotoLoaded = true;
}
$(function()
{
//Hides scrollbars, so we can resize properly. Set with JS instead of
// CSS so that page doesn't break with JS disabled.
$("body").css("overflow", "hidden");
var REAL_WIDTH = -1;
var REAL_HEIGHT = -1;
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(!isPhotoLoaded)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
else if(REAL_WIDTH < 0)
{
//first time in this function since photo loaded
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
max-widthとmax-height画像スタイリングの何が問題になっていますか？次に、最大幅/高さをビューポートの幅/高さのサイズに設定することにより、記述する必要のあるすべてのコードを回避します。