Preloading CSS Images

I can confirm that my original code seems to work. I was casually sticking to an image with a wrong path.

Here's a test : http://paragraphe.org/slidetoggletest/test.html

<script>
    var pic = new Image();
    var pic2 = new Image();
    var pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>

Preload images using css

I suppose that method would work, as long as the image isn't dynamically generated. The only issue with preloading using just CSS seems to be that the images download WITH the page, not after it. You can trigger the JavaScript event after the pageload is over.

Further reading: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

How to preload images using CSS?

Personally I would use JavaScript in this case. But if you want only CSS you can preload all images in a div tag which is positioned in hidden part of window like follows:

#preload
{
    position:absolute;
    top:-9999px;
    left:-9999px;
}

<div id="preload">
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>

Preload background images

You could preload them using CSS like:

body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

NOTE: You could use an array of images in the JS code and change them based on the index i.

var duration = 2500;var delay = 500;var i = 0;var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
setInterval(function() {  $(".myimage").css("background-image", "url(" + images[i] + ")");  i++;}, duration + delay)

.myimage {  height: 500px;  width: 500px;  transition: background-image 1s linear;  background-image: url('https://placeimg.com/1648/1488/any');  background-size: cover;}
body::after {  position: absolute;  width: 0;  height: 0;  overflow: hidden;  z-index: -1;  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="myimage"></div>

preload hidden CSS images

When you said other ways do you mean ones that don't use Javascript?

<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>

Other none JS ways are to place some html in your page somewhere so it's not seen:

<image src="picture.jpg" width="1" height="1" border="0">

or HTML...

<img src="images/arrow-down.png" class="hiddenPic" />

...and CSS...

.hiddenPic {
    height:1px;
    width:1px;
}

More JavaScript Methods:

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}

Then load the images using something like:

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>

Preloading CSS Images