Эффективный и популярный lazy load?

Question

[HamSter]

Иногда нет возможности оптимизировать все изображения на сайте, а требования к скорости загрузки страниц становятся все жестче и жестче.

По совету использую Echo.js lazy load. И, вроде, все неплохо.

В сети достаточно много и плагинов и небольших кусочков кода для lazy load, в связи с этим.

Вопрос: Какой lazy load используете Вы, такой чтобы и скорость оптимизировал и был максимально кроссбраузерный, удобный в использовании и желательно на фоне отображал превью (в виде серого фона или другого)?

Comments

[sim3x]

Использовать конструкцию с picture громоздко и не эффективно из-за кроссбраузерности (низкая )

неправда

Данная конструкция
https://developer.mozilla.org/en-US/docs/Learn/HTM...

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

не data-src
а просто src

будет хаваться даже ие6

Вы видимо не понимаете, как работают хаки
То что браузер воспримет неизвестный ему тег, как див (или просто проигнорирует), как раз и есть требуемое поведение данного блока

Теперь про ленивую загрузку
Зачем вообще загружать хтмл (с картинками или без), если его можно загрузить потом. По действию пользователя или по таймауту после dom ready?

[HamSter]

sim3x, переформулировала вопрос, а то уцепились в picture меня не устраивает такая конструкция потому что у меня она в ие не работает, хаки меня не устраивают ( валидность и прочие проблемы) и громоздкая (хотелось бы использовать простоimg ). Повторюсь еще раз у меня picture не работает в ие и кстати в мозиле тоже. И да, у меня там опечатка была, конечно же не data-src, а <picture> <source srcset= ...

2.

Зачем вообще загружать хтмл (с картинками или без), если его можно загрузить потом. По действию пользователя или по таймауту после dom ready?

Я спросила о кусочке кода или популярных плагинах. Что загружать потом куда ... Не спорю что в этом вопросе не могу разобраться, но если Вы не можете пояснить, то зачем вообще писать?

[sim3x]

HamSter,

валидность и прочие проблемы

в старые времена была популярна валидность по браузеру - если браузер отобразил, значит валидно

хотелось бы использовать просто img

нет, сейчас не получится

И да, у меня там опечатка была,

<img src="elva-800w.jpg"работает везде

Я спросила о кусочке кода или популярных плагинах.

а вам указал какой кусок кода сейчас используется и как его лучше загружать

Answer 1

[grinat]

Progressive jpeg, в нем сначала отображается изображение в плохом качестве, затем в хорошем, есть плагины для вебсерверов, которые делают это на лету, затем включить spdy, использовать один домен/сабдомен для статики.

Есть такой вариант:
img src="grey.png" data-full="big-image" width=100 height=100
images = document.getElementsByTagName('img')
for (image of images) {
if (image.dataFull) {
image.src = image.dataFull
// для тех у кого на мобильном интернете сорвалась загрузка
image.onerror = () => image.src = image.dataFull
}
}
Но оно нормально не будет работать, браузеры сами умеют неплохо в оптимизацию, и она например норм работает при плохом конекте, но при этом я не видел кастомных имплемантаций, которые адекватно работают на плохом интернете. Да и маловероятно что они будут, потому что нет нормально api которое определяет есть сеть или нет, чтобы заморозить загрузку и начать ее снова, когда она появится. Далее надо разбираться с тем сколько коннектов может быть к серверу одновременно открытых и как оптимизировать время, которое нужно на соединение с сервером.