Блог

Я извлекаю все изображения профиля моего друга и создаю виджет, который будет отображать изображения одно за другим при следующем нажатии кнопки. Когда я делаю запрос на сервер facebook, в ответ во время рендеринга html я вижу, что все изображения отображаются в браузере, и после завершения загрузки все идеально вписывается в виджет. Как я могу избежать отображения этих изображений, пока моя страница все еще загружается.

Я что-то слышал о lazyloading, который будет загружать изображения только при сворачивании страницы. У меня нет опции прокрутки вниз и я понятия не имею, как использовать ladyload, но есть ли что-нибудь подобное, что было бы полезно для меня?

Вы можете использовать css, чтобы скрыть все изображения в виджете:

 #widget img {display:none;}
  

Затем используйте jquery, чтобы показать их, когда DOM будет прочитан, и все изображения будут загружены:

 $(document).ready(function() {
  $('#widget img').show()
});
  

Что-то вроде этого будет работать.

Если вам нужно разрабатывать только для поддерживаемых браузеров [проверьте это здесь] https://caniuse.com/#feat=loading-lazy-attr

вам лучше использовать встроенную отложенную загрузку изображений следующим образом:

 <img src="https://picsum.photos/id/300.jpg" loading="lazy" />
  

Существуют различные варианты отложенной загрузки изображений, если вы используете JavaScript.

Существует довольно много библиотек, которые помогут вам, например, плагин ленивой загрузки jquery: http://www.appelsiini.net/projects/lazyload

Или различные альтернативы, которые вы найдете через нашего старого друга Google 🙂

Используйте библиотеку отложенной загрузки jquery. Вот хорошее введение: http://deanhume.com/Home/BlogPost/lazy-loading-images-with-jquery/22

Вы можете использовать jQuery. jQuery — это «быстрая, лаконичная библиотека, которая упрощает просмотр HTML-документов, обработку событий, выполнение анимации и добавление AJAX».

Скрипты Jquery обычно запускаются с помощью этих команд

  $(document).ready(function() {
   // put all your jQuery goodness in here.
 });
  

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

Здесь вы можете найти несколько руководств по jQuery