picture_javascript スキルの実際のサイズを取得するための JavaScript コードの例

Web ページ上の画像サイズはすべて同じように見えます。複数の写真が含まれる記事ページでよく見かけるのは、写真のサイズがページの幅と同じであることが多く、このレイアウトをあまりにも見すぎると、ページが直線的な円柱のように見えます。とても単調に感じます。このような状況の理由は、古いブラウザの制限によるところが大きいと思います。しかし、最新のブラウザ (Firefox/Google/IE11) の普及により、ブラウザのページ デザインに対する制限はますます少なくなり、Web プログラマーの想像力を大いに活用できるようになりました。

たとえば、トリビア: すべてのウィンドウの [x] がどこから来たか知っていますか?この記事では、文字幅の制限を超えた写真が多く、凹凸感を与えていると同時に、大きな写真を実物大で表示することで、より衝撃的な印象を与えています。

しかし、技術的には、テキストの最大幅で画像を簡単に制限できるため、テキストの幅を制限する代わりに、すべての画像が同じ幅を維持することができます。サーバー側で編集するときに画像の元のサイズを宣言できます。より柔軟な方法は、ページ上に js を配置することで画像の元のサイズを動的に取得し、画像の表示サイズを動的に変更することです。これは、テキスト幅を最大化する古い方法と互換性があるだけでなく、必要に応じて画像を元のサイズで表示することもできます。

JavaScriptを使用してブラウザ側で画像の元のサイズを取得するにはどうすればよいですか?

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

var img = $(“#img_id”) // img elem
を取得します。 var pic_real_width, pic_real_height;
$(“”) // CSS の問題を避けるためにメモリ内に画像のコピーを作成します
.attr(“src”, $(img).attr(“src”))
.load(function() {
pic_real_width = this.width; // 注: $(this).width() は実行されません
pic_real_height = this.height; // メモリ内の画像に対して動作します。
});

Webkit ブラウザ (Google Chrome など) は、画像のロード イベント後にのみ高さと幅の値を取得できます。したがって、タイムアウト関数を使用して待機を遅らせることはできません。最善の方法は、イメージの onload イベントを使用することです。

画像サイズに対する CSS の影響を避けるために、上記のコードは計算のために画像をメモリにコピーします。

ページが古いページの場合は、必要に応じてこのコードをページの下部に埋め込むことができます。元のページを変更する必要はありません。