Question

Pretty simple question:

Can I force a browser to not download any images or other resources if they are display:none, but then, of course download when display is switched to inline?

Here is the concept: A lecture presentation with many slides as images all set to display:none by default then changed to display:inline when the video reaches a certain time index. The browser still tries to load all of the images even though they are not displayed which might cause a hang on the video or elements that should load after the slide images.

I have a series of these:

<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>

EDIT – SHOULD WORK?

<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;
   });
}

Answer 1

Here is what I ended up doing.

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>

In the function that runs the timings for the slides I added the variable:

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

I then added this statement in the section of code (a ‘for’ loop) that applies display:inline to the figure tags at the correct moments according to the video’s current time.

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

So in addition to displaying the figure tag in question it will also take the data-src value for the image in question and insert it in the src attribute. The image then loads.

There is a lot of power behind the data-* custom attributes. Glad I learned about those.

One would think, however, that display:none should prevent loading the content unless the display is changed.