javascript - レスポンシブ イメージ用のアダプティブ (「イメージ ID + テキスト文字列」) JavaScript

Question

レスポンシブ画像の置換に次のコードを使用しています。

//HTML:

<img id="testimage" onLoad="minWidth32('test_image')" src="testimage_small.jpg">


//JavaScript:

var screencheck = window.matchMedia("(min-width: 32em)");
function minWidth32(imageName) {
   if (screencheck.matches) {
      currentImage = document.images[imageName];
      currentImage.src = imageName + "_large.jpg";
   }
}

(編集) JavaScript の新しい合理化されたバージョン:

var screencheck = window.matchMedia("(min-width: 32em)");
function minWidth32(imageID) {
   if (screencheck.matches) {
      document.getElementById(imageID).src = imageID + "_large.jpg";
   }
}

画像変更の「画像ID＋文字列」方式がとても気に入っています。1 つのスクリプト (メディア クエリごと) で、必要な数の画像を実行できます。多くのレスポンシブ イメージ スクリプト/プラグイン/ライブラリには、これが含まれます。多くの。マークアップ。

しかし、この特定のスクリプトは、ある程度しか機能しません。

1.) もともと「onMouseOver」ロールオーバー効果用に設計されたこのスクリプトには、イベント リスナーが必要です。これはレスポンシブ イメージ スクリプトには理想的ではありません。これは、"onLoad" イベントが終了してからしばらくしてからブラウザーのサイズが変更され、モバイル デバイスの向きが変わるためです。

2.) このスクリプトは、空でない src 属性のみを変更できます (上記の例では、「test_image_small.jpg」から「test_image_large.jpg」に)。これは、両方の画像がまだロードされていることを意味し、帯域幅を浪費し、レイアウトが不愉快にジャンプします. 空の src 属性を埋めたいと思います。

だから基本的に私が必要とするもの - そして理解することができなかった - はこれです:

//if (screencheck.matches &&
 //item is an image tag &&
 //item has empty src attribute &&
 //item has non-empty ID attribute) {
   //set item src attribute = item ID attribute + a text string
//}