Управление очередью при загрузке DOM

112
04 января 2020, 21:10

Есть модальное окно. В нём много изображений. Открывается оно по необходимости, поэтому загружать их при загрузке DOM нет смысла. Как мне исключить загрузку всех изображений с классом cover__preview и при необходимости, например при вызове функции open_cover_modal() загрузить?

Answer 1

Вариант такой: Записать src в data-src, а потом когда надо заполнить src у картинок Вот пример с использованием JQuery

$('button').on('click', function () { 
  $('img').attr('src', function () { 
    return this.dataset.src; 
  }); 
});
img { 
  display:block; 
  width: 200px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<img data-src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" alt="фото"/> 
<button>Click me</button>

READ ALSO
Распечатать изображение по ссылке
javascript

Распечатать изображение по ссылке

Есть ф-я которая по идеи должна выводить на печать картинку:

 120
Не запускается автоплей в slick slider
javascript

Не запускается автоплей в slick slider

Не запускается слайдер, в чём проблема?

 135
Счетчик цифр с двумя интервалами
javascript

Счетчик цифр с двумя интервалами

Нужна ваша помощь в js и jqueryСуть задачи такая - есть определенное число, например 190 000 тонн, при загрузке страницы это число должно с 0 досчитать...

 118
Phaser 3.15.1 Мигание спрайта при коллизии
javascript

Phaser 3.15.1 Мигание спрайта при коллизии

Я хочу реализовать покраснение экрана при столкновении с врагом, но по как-то причине мой код не работает

 119