Preloading images via CSS


#1

What’s the difference between these 2, and should it be,

before:

or

after:

Is having it one way better than the other?

Is one way more right than the other?

What’s happening here?
https://jsfiddle.net/g72cho6j/83/

.image:after {
  content: "";
  background: url(https://i.imgur.com/AJDZEOX.jpg), url(https://i.imgur.com/UzRn6Qx.png), url(https://i.imgur.com/96Q10GA.png), url(https://i.imgur.com/WzHsnG7.png), url(https://i.imgur.com/CzqEXBq.jpg), url(https://i.imgur.com/fOfpsiC.png), url(https://i.imgur.com/b3Rqi4d.png);
  width: 0;
  height: 0;
  visibility: hidden;
}

What’s happening here?
https://jsfiddle.net/g72cho6j/84/

.image:after {
  content: "";
  background: url(https://i.imgur.com/AJDZEOX.jpg), url(https://i.imgur.com/UzRn6Qx.png), url(https://i.imgur.com/96Q10GA.png), url(https://i.imgur.com/WzHsnG7.png), url(https://i.imgur.com/CzqEXBq.jpg), url(https://i.imgur.com/fOfpsiC.png), url(https://i.imgur.com/b3Rqi4d.png);
  width: 0;
  height: 0;
  visibility: hidden;
}

Also:
Is doing it this way bad?
https://jsfiddle.net/g72cho6j/85/

  <div class="hide">
  <img src="https://i.imgur.com/AJDZEOX.jpg" alt="" />
  <img src="https://i.imgur.com/UzRn6Qx.png" alt="" />
  <img src="https://i.imgur.com/96Q10GA.png" alt="" />
  <img src="https://i.imgur.com/WzHsnG7.png" alt="" />
  <img src="https://i.imgur.com/CzqEXBq.jpg" alt="" />
  <img src="https://i.imgur.com/fOfpsiC.png" alt="" />
  <img src="https://i.imgur.com/b3Rqi4d.png" alt="" />
  </div>

.hide {
  display: none;
}

I keep seeing them written with either:

visibility: hidden;

or

display: none;

I’ve even seen one written using both:

display: none;
visibility: hidden;

Is one better than the other, or even using both?

I know all these I’ve listed work in firefox, but I don’t know about other browsers.

This one uses this:
https://jsfiddle.net/g72cho6j/97/

<div class="image">
  <img src="https://i.imgur.com/AJDZEOX.jpg" alt="" />
  <img src="https://i.imgur.com/UzRn6Qx.png" alt="" />
  <img src="https://i.imgur.com/96Q10GA.png" alt="" />
  <img src="https://i.imgur.com/WzHsnG7.png" alt="" />
  <img src="https://i.imgur.com/CzqEXBq.jpg" alt="" />
  <img src="https://i.imgur.com/fOfpsiC.png" alt="" />
  <img src="https://i.imgur.com/b3Rqi4d.png" alt="" />
</div>

.image img {
  visibility: hidden;
  position: absolute;
}

#2

If the image is display:none (or possibly visibility:hidden or width:0 and height:0) some browsers are clever enough to know that he image is hidden and therefore will not download it until it is needed on the page. Therefore the best method is to place the image offscreen (e.g. position:absolute; left:-999em;top:-999em) and not use display:none or visibility:hidden.

Don’t add extra elements to preload images anyway as you can use body:after (or:before) to do that. Of course preloading images may slow your initial page down if you are loading images that are not needed until later and a js method would be better.


#3

I’ll stick with the javascript one then.

This way works good I found:

Does anyone know why it works really well?
https://jsfiddle.net/g72cho6j/99/

Not a lot of code, simple to use, and does what it’s supposed to do.

  <script>
  if (document.images) {
    img1 = new Image();
    img1.src = "https://i.imgur.com/AJDZEOX.jpg";
    img2 = new Image();
    img2.src = "https://i.imgur.com/UzRn6Qx.png";
    img3 = new Image();
    img3.src = "https://i.imgur.com/96Q10GA.png";
    img4 = new Image();
    img4.src = "https://i.imgur.com/WzHsnG7.png";
    img5 = new Image();
    img5.src = "https://i.imgur.com/CzqEXBq.jpg";
    img6 = new Image();
    img6.src = "https://i.imgur.com/fOfpsiC.png";
    img7 = new Image();
    img7src = "https://i.imgur.com/b3Rqi4d.png";
  }
</script>

#4

What if it’s, display:none with
width:1 and height:1 ?


#5

IF it’s display none then the size is irrelevant as the image is not there anhyway. As I said before some browsers ‘may’ decide not to downliad the image if it isn’t yet required.