Довольно простой вопрос:

Могу ли я заставить браузер не загружать никакие изображения или другие ресурсы, если они отображаются: нет, но затем, конечно же, загружать, когда отображение переключается на встроенный?

Вот концепция: презентация лекции с множеством слайдов в виде изображений, настроенных для отображения: ни один по умолчанию не изменяется, а затем отображается: встроенный, когда видео достигает определенного временного индекса. Браузер все еще пытается загрузить все изображения, даже если они не отображаются, что может привести к зависанию видео или элементов, которые должны загружаться после слайд-изображений.

У меня есть серия из них:

<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img src="img1_large.JPG" class="lectureSlidesImg" /></a></figure>

РЕДАКТИРОВАТЬ - ДОЛЖЕН РАБОТАТЬ?

<img data-src=/path/to/img.png src="">

//js
loadNextImages() {
   document.querySelectorAll("#slidesContainer footer").map(function () {
       this.getElementsByTagName('img').src = this.getElementsByTagName('img').dataset.src;
       delete this.dataset.src;
   });
}
0
1934286 30 Янв 2013 в 10:51

2 ответа

Лучший ответ

Вот что я в итоге сделал.

Html

<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img data-src="img1_large.JPG" src="" class="lectureSlidesImg" /></a></figure>

В функцию, которая запускает время для слайдов, я добавил переменную:

var imgNames = document.getElementsByClassName('lectureSlidesImg');

Затем я добавил это утверждение в раздел кода (цикл «for»), в котором применяется display: inline к тегам рисунка в правильные моменты в соответствии с текущим временем видео.

imgNames[i].src = imgNames[i].getAttribute('data-src');

Таким образом, в дополнение к отображению рассматриваемого тега figure он также принимает значение data-src для рассматриваемого изображения и вставляет его в атрибут src. Затем изображение загружается.

За данными- * настраиваемыми атрибутами лежит большая сила. Рад, что узнал об этом.

Однако можно подумать, что это отображение: ни один из них не должен препятствовать загрузке контента, если дисплей не изменен.

0
1934286 4 Фев 2013 в 23:17

Обновите HTML-код, чтобы у скрытых изображений не было src (или, например, не было файла с одним прозрачным пикселем в качестве источника), и используйте data-src и измените src при его отображении. :

<img data-src=/path/to/img.png src="">

//js
loadNextImages() {
    document.querySelectorAll("#container img").map(function () {
        this.src = this.dataset.src;
        delete this.dataset.src;
    });
}
5
Explosion Pills 30 Янв 2013 в 07:04