2

When a user clicks one of nine buttons, a div (with an origin style of display: none) with some text and pictures will be propagated to the screen; clicking one of the other buttons swaps to the corresponding div.

Right now, the swapping divs look like the following:

<div class="next-slide-container" id="base-soft">
   Some Text<br>
   Some Text<br>
   Lines<br>
   Lines<br>
   <br>
   <!-- an image loaded in here -->
</div>

Now, I grew suspicious that if the page is loading all 9 of these divs and their respective images at once, though hidden, that it would unnecessarily increase loading times. So, I went to Google and Stack Overflow to find some info and found a great thread here:

Does "display:none" prevent an image from loading?

This provided some great insights and how to get the images to not load on page launch, but there's an edit on the top answer that disclaimed that, "Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful."

So, why I am sort of rehashing this topic is because that top post was about 20-months ago; are there better alternatives to what was advised in that post, "set the IMG src attribute to "data:" or "about:blank""? Additionally, I'm seeking suggestions on the best-practice way of handling dynamic div loading. Thanks!

Community
  • 1
  • 1
8protons
  • 2,802
  • 2
  • 23
  • 47
  • I thought about using JavaScript to dynamically load in text as needed but I felt that getting the styling I want to load and look as desired might prove less trivial than just hard coding them into the HTML and keeping each section hidden until needed. Would utilizing JavaScript be better? – 8protons Mar 10 '16 at 15:17

0 Answers0