Адаптивный ("идентификатор изображения + текстовая строка") 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";
   }
}

Мне очень нравится метод "идентификатор изображения + текстовая строка" для изменения изображения. Это позволяет одному скрипту (для каждого медиазапроса) запускать столько изображений, сколько необходимо. Многие адаптивные графические скрипты / плагины / библиотеки используют это. много. наценка.

Но этот конкретный скрипт только работает:

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
//}

Answer 1

Как насчет зациклить изображения, проверьте, если src пусто, и если это так, заполните его на основе атрибута данных и разрешения экрана?

Обратите внимание, что это решение изменяет только изображения во время загрузки в зависимости от размера экрана в этой точке. Смотрите это в jsfiddle: http://jsfiddle.net/rr4qngfu/

// in document ready handler:
var screencheck = window.matchMedia("(min-width: 32em)");
var size_suffix = screencheck.matches ? '-large' : '-small';
for (var i=0; i<document.images.length; i++) {
    var img = document.images[i];
    var src_base = img.getAttribute('data-src-base');
    if (img.src == '' &&  src_base != null) {
       // remove the file extension (ie. .png, .jpg, etc..) and re-add it after the size_suffix
       var _split = src_base.split(/(^.*)(\.[^.]*)$/)
       var file_name = _split[1];
       var extension = _split[2];
       img.src = file_name + size_suffix + extension;
    }
}

Входные данные:

<!-- example img in html -->
<img src="" data-src-base="logo.png">

Ожидаемый результат (не тестировался):

<!-- resulting DOM (after javascript runs on high resolution) -->
<img src="logo-large.png" data-src-base="logo.png">