Using javascript to preload images

Which of these do you like the best and why.

How exactly do, or would you test these to see which works the best?

What are the things you look for?

1st Method:
https://newtestiop.blogspot.com/

<script>
if (document.images) {
    img1 = new Image();
    img1.src = "image.jpg";
    img2 = new Image();
    img2.src = "image2.jpg";
}
</script>

2nd Method:
https://javascriptpreload3.blogspot.com/

<div class="hidden">
	<script type="text/javascript">
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"http://domain.tld/gallery/image-001.jpg",
				"http://domain.tld/gallery/image-002.jpg",
				"http://domain.tld/gallery/image-003.jpg"
			)
	</script>
</div>

3rd Method:
https://preloadjavascript.blogspot.com/

<div class="hidden">
	<script type="text/javascript">

			if (document.images) {
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();

				img1.src = "http://domain.tld/path/to/image-001.gif";
				img2.src = "http://domain.tld/path/to/image-002.gif";
				img3.src = "http://domain.tld/path/to/image-003.gif";
			}
	</script>
</div>

4th Method:
https://testingdfsdf.blogspot.com/

<div class="hidden">

	<script type="text/javascript">

function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "http://domain.tld/path/to/image-001.gif";
		img2.src = "http://domain.tld/path/to/image-002.gif";
		img3.src = "http://domain.tld/path/to/image-003.gif";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);
			}

	</script>
</div>

5th Method
https://testing45435.blogspot.com/

.image-container {
   visibility: hidden;
   position: absolute;
 }
 
 .image-container_image {
   visibility: hidden;
   position: absolute;
 }


<div class="image-container">
  <img class="image-container_image" src="" aria-hidden="true" alt="" />
</div>

1st Method: Clear History: 1st Load
https://newtestiop.blogspot.com/


2nd Method: Clear History: 1st Load
https://javascriptpreload3.blogspot.com/
https://i.imgur.com/ZgEbSyF.png

3rd Method: Clear History: 1st Load
https://preloadjavascript.blogspot.com/
https://i.imgur.com/DpSRJZQ.png

4th Method: Clear History: 1st Load
https://testingdfsdf.blogspot.com/
https://i.imgur.com/hxA9m3N.png
https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Date: 2009

As you can see, each preloaded image requires a variable definition, “img1 = new Image();”, as well as a source declaration, “img3.src = “…/path/to/image-003.gif”;”. By replicating the pattern, you can preload as many images as necessary. Hopefully this is clear — if not, please leave a comment and someone will try to help you out.

We can even improve this method a bit by delaying preloading until after the page loads. To do this, we simply wrap the script in a function and use addLoadEvent() to make it work:

<div class="hidden">
	<script>

function preloader() {
	if (document.images) {
		var img1 = new Image();


		img1.src = "https://i.imgur.com/yNVkI3W.png";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

	</script>
</div>

5th Method: Clear History: 1st Load
https://testing45435.blogspot.com/
https://i.imgur.com/uJ8XGtZ.png

6th Method: Clear History: 1st Load
https://html2preload.blogspot.com/

 .hideb {
   display: none;
 }

</style>

<img class="hideb" src="https://i.imgur.com/yNVkI3W.png" alt=""  />

https://i.imgur.com/Oq4ssZ6.png

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