Есть ли способ объединить библиотеку lazyload js с Picturefill?

Мне интересно, как бы вы включили lazyload.js в Picturefill, когда синтаксис изображения lazyload требует тега img вместе с data-original, а синтаксис Picturefill не имеет места для них.

Например, это моя разметка для изображения с использованием Picturefill:

  <span data-picture data-alt="Operating room 2 stands vacant in Dr. Tariq Mahmood's closed Renaissance Hospital in Terrell, Texas.">
            <span data-src="img/main1_small.jpg"></span>
            <span data-src="img/main1_small_x2.jpg"     data-media="(min-width: 300px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="img/main1_small.jpg"        data-media="(min-width: 300px)"></span>
            <span data-src="img/main1_medium_x2.jpg"    data-media="(min-width: 601px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="img/main1_medium.jpg"       data-media="(min-width: 601px)"></span>    
            <span data-src="img/main1_large.jpg"        data-media="(min-width: 1101px)"></span>                                       

            <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <noscript>
                <img src="img/main1_small.jpg" alt="Operarting room 2 stands vacatn in Dr. Tariq Mahmood's closed Renaissance Hospital in Terrell, Texas.">
            </noscript>
         </span>

Не уверен, куда бы я поместил класс, атрибут класса, который требуется lazyload.js для тега изображения или атрибута data-original. Любые идеи о том, как реализовать lazyload.js вместе с Picturefill, или какие-либо другие способы отложенной загрузки изображений при сохранении использования Picturefill?

Источник

2 ответа

Решение

Проверьте эту проблему. Комментатор Голодрос имеет такую ​​идею:

По моему опыту, это легко исправить, если не добавлять атрибут data-picture ко всем оболочкам изображений.

Вы можете прослушать событие прокрутки / прокрутки / вкладки и добавить атрибут data-picture, впоследствии выполнив picturefill(), чтобы получить функцию отложенной загрузки.

что также отражено в этом твите joel_birch:

Lazy-load Picturefill: применять атрибут data-picture, только если изображение в области просмотра, затем вызывать picturefill(). Повторите на прокрутке. Просто на самом деле.

Таким образом, в основном, вы настраиваете своих собственных слушателей прокрутки (или используете для этого библиотеку или скрипт), и, когда появляется каждый промежуток изображения, вы добавляете data-picture приписать его контейнер span, а затем вручную позвонить window.picturefill() (согласно документам, этот метод преднамеренно представлен в глобальном пространстве имен). Это приведет к повторному запуску сценария picturefill, и в этот момент он обнаружит ваш новый элемент прокрутки и отобразит его обычную функцию, загрузив изображение правильного размера.

ОБНОВИТЬ

Вот подтверждение концепции: http://codepen.io/jonahx/pen/536957770caa3b5e3deb8d96bd421314

Источник

Я сделал индивидуальную версию picturefill,js, чтобы добиться этого:

https://gist.github.com/sheadawson/dd4891fa13f82f6a9b20

Демо в

codepen.io/sheadawson/pen/fvFLc

Источник
Другие вопросы по тегам