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>