0
Я ищу рекомендации о том, как лучше всего lazyload элементы изображения. Мне может понравиться использовать небольшую вспомогательную функцию jQuery, чтобы определить, является ли изображение «на экране». Но ленивый выбор srcset, я не уверен сейчас, как это сделать. Итак, какие-то идеи?Lazyloading элементы изображения
Вот пример элементов изображения, с которыми я работаю. Благодаря!
<picture alt="Random Celebrities" data-src="http://www.example.com/r/c_1,h_478,w_478/2015/03/19/random-celebrities-08-560x560.jpg">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source class='picture-source-1260' srcset='http://www.example.com/r/c_1,h_239,w_239/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_478,w_478/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 1260px)'>
<source class='picture-source-960' srcset='http://www.example.com/r/c_1,h_180,w_180/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_360,w_360/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 960px)'>
<source class='picture-source-760' srcset='http://www.example.com/r/c_1,h_150,w_150/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_300,w_300/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 760px)'>
<source class='picture-source-450' srcset='http://www.example.com/r/c_1,h_210,w_210/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_420,w_420/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 450px)'>
<source class='picture-source-320' srcset='http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_320,w_320/2015/03/19/random-celebrities-08-560x560.jpg 2x'>
<!--[if IE 9]></video><![endif]-->
<noscript>
<img class="picture-img-noscript" src="http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg" alt="Random Celebrities" />
</noscript>
<img class="picture-img" srcset="http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg" alt="Random Celebrities" />
</picture>
Когда я пытаюсь добавить тег «picture» или «picture-element» для этого вопроса, он преобразуется в «изображение». Но просто для уточнения, я специально смотрю на ленивую загрузку изображения, определенного с помощью тега изображения и srcset. – jerome
Браузер ленивый загружает элемент изображения для вас, если вы хотите реплицировать весь процесс, который использует браузер и использует JavaScript (предположительно, чтобы иметь возможность добавить какой-то визуальный переход), тогда вам не нужно (и, возможно, не следует) использовать элемент изображения в качестве вашего заполнителя. – Adam
Значит, элемент изображения, который находится «под складкой» или иначе из окна просмотра (вне экрана в карусели и т. Д.), Не загружается, пока он не войдет в окно просмотра? – jerome