Прогрессивное улучшение для ленивых загружаемых изображений (Javascript)?

Question

Я прочитал о Progressive Enhancement и хотел бы реализовать его в одной из моих галерей изображений.

Недавнее состояние галереи: я использую jquery lazyload plugin, который загружает все изображения, когда они появляются в текущем окне браузера, прокручивая. Плагин использует фиктивное изображение, а также атрибут data-original, например. <img src="dummy.png" data-original="ourimagetodisplay.png" />

Теперь, когда я переключаю javascript с манекена, отображается, и исходное изображение больше не отображается.

Моя первая идея заключалась в том, чтобы обнаружить с помощью PHP, если JS включен, и обслуживать изображения соответственно, но это невозможно как described here.

Итак, мои вопросы в том, как вы будете служить исходным изображениям данных, а не макету src. Или какое обходное решение вы бы предложили?

Обратите внимание, что в галерее более 100 изображений. Вот почему я на самом деле реализовал ленивую загрузку, чтобы иметь более быструю загрузку страниц.

Answer 1

Я работаю над ленивым грузчиком изображений предназначены для обеспечения прогрессивного улучшения и правильный HTML, GitHub ссылки: https://github.com/tvler/lazy-progressive-enhancement

lazyloaded изображения будет объявлено обернув его в NoScript элемента:

<noscript><img alt="hello!" src="..."></noscript>

и окончательный вывод html будет

<img alt="hello!" src="...">.

Вы можете просмотреть весь проект на GitHub, который занимается с пакетной загрузки, событие перекинув более &, но вот основная функциональность в рамках единой NoScript изображения:

var noscript = document.querySelector('noscript'), img; 
(img = document.createElement('div')).innerHTML = noscript.textContent; 
noscript.parentElement.replaceChild(img.firstChild, noscript);