What combination of this image preload code makes the most sense?

HTML & CSS
1

It was originally 1, but then I thought to myself, why not just, display none, and that’s it?

Which would be number 4.

1

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/yNVkI3W.png" width="260" height="260" aria-hidden="true" alt="" />
</div>

2

<div style="display: none;">
  <img style="display: none; position: absolute" src="https://i.imgur.com/yNVkI3W.png" width="260" height="260" aria-hidden="true" alt="" />
</div>

3
https://jsfiddle.net/drgdmz1o/7/

<div style="display:none;">
  <img style="position: absolute" src="https://i.imgur.com/yNVkI3W.png" aria-hidden="true" alt="" />
</div>

4
https://jsfiddle.net/drgdmz1o/5/

<div style="display:none;">
  <img src="https://i.imgur.com/yNVkI3W.png" aria-hidden="true" alt="" />
</div>
2

I just found this, my only question is, Who surfs the web with CSS turned off?

Also, if it’s display none, how would you even see it anyway?

It is prudent to specify a width and height of “1” in case a browser is surfing with CSS turned off. One-pixel square images would be little if any distraction.

<div style="display:none;">
<img src="/images/imageA.jpg" width="1" height="1" border="0" alt="Image 01">
<img src="/images/imageB.jpg" width="1" height="1" border="0" alt="Image 02">
<img src="/images/imageC.jpg" width="1" height="1" border="0" alt="Image 03">
<img src="/images/imageD.jpg" width="1" height="1" border="0" alt="Image 04">
<img src="/images/imageE.jpg" width="1" height="1" border="0" alt="Image 05">
</div>
3

When you post information such as that,please include the date and possibly the source of the article or comment.

4

As has been explained on numerous occasions, there is no “best” or “one-size-fits-all” solution to coding. The choice of approach depends on the actual situation. Rather than posting random versions of code from various places and asking “which is best”, you would get much more useful responses if you explained what problem you are seeking to address, and asked how best to approach it.

2 Likes
5

None of those examples “makes the most sense”.

They all have style attributes and the style attribute has no place being in any HTML code that you have control over in how it’s written.

You’ve never heard of this browser?
https://lynx.browser.org/

1 Like
6

Where’s the date on it? The only thing I found was on the javascript code which says, 2009.

7

These days I think the most intuitive method is what is referred to as ‘lazy loading’.

Something similar to this -

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport.

What I like about it is that it uses the vanilla js framework that weighs in at an astonishing 0 bytes.

Believe it or not, there are still people that do not have high speed broadband connections, I’m one of them. I can tell when a site takes forever to load due to images that are not optimized or “Preloading Images” that I may not even be interested in viewing. Especially common with image galleries, hence the reason they need real thumbnail images and not just scaled down versions of the large image.

4 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.