EN
JavaScript - preload image
3
points
In this article, we would like to show you how toĀ preload imagesĀ using JavaScript.
Quick solution:
<script>
function preloadImage(url) {
var image = new Image();
image.src = url;
image.loading = 'lazy';
return image;
}
var url = 'https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg';
var img = preloadImage(url);
</script>
Note: In this case new image object is created in the web browser memory causing image fetching.
or:
<script>
function preloadImage(url) {
var link = document.createElement('link');
link.href = url;
link.rel = 'preload';
link.as = 'image';
document.head.appendChild(link);
}
preloadImage('https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg');
</script>
Note: In this case new
linkelement is created inheadelement causing image fetching.
Ā
Practical examples
In the below examples, we create preloadImage() function that loads images for indicated URLs.
Example 1
In this example, we create all image elements before, and mount them inside the containerĀ element on click event.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button onclick="useImage(img1)">Image 1</button>
<button onclick="useImage(img2)">Image 2</button>
<button onclick="useImage(img3)">Image 3</button>
<br /><br />
<div class="images-container"></div>
<script>
function preloadImage(url) {
var image = document.createElement('img');
image.src = url;
image.loading = 'lazy';
return image;
}
// Usage example
var imagesContainer = document.querySelector('.images-container');
var url1 = 'https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png';
var url2 = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';
var url3 = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png';
// images preloading:
window.img1 = preloadImage(url1);
window.img2 = preloadImage(url2);
window.img3 = preloadImage(url3);
var currentImage = null;
// Helper methods
function useImage(image) {
if (currentImage) {
imagesContainer.removeChild(currentImage);
}
imagesContainer.appendChild(image);
currentImage = image;
}
</script>
</body>
</html>
Example 2
In this example, we preload imagesĀ into the web browser cache.
The main idea is to:
- create image objects indicating URLs,
- the imagesĀ will be loaded andĀ by default stored insideĀ the cache,
- next calls to the sameĀ URLs will cause loading from the cache.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button onclick="image.src='/static/bucket/1631898942509-VMYrnXyYZv--image.png'">Image 1</button>
<button onclick="image.src='/static/bucket/1574890428058-BZOQxN2D3p--image.png'">Image 2</button>
<button onclick="image.src='/static/bucket/1633375165831-yjQ7G6WQeL--image.png'">Image 3</button>
<br /><br />
<img id="image" src="/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<script>
window.image = document.querySelector('#image');
function preloadImage(url) {
var image = new Image();
image.src = url;
image.loading = 'lazy';
return image;
}
// images preloading (we can run it in window load event):
preloadImage('/static/bucket/1631898942509-VMYrnXyYZv--image.png');
preloadImage('/static/bucket/1574890428058-BZOQxN2D3p--image.png');
preloadImage('/static/bucket/1633375165831-yjQ7G6WQeL--image.png');
</script>
</body>
</html>
Example 3
In this example, we use built-in mechanism thatĀ tries to load indicated images as soon as it is possible.
The main idea is to put specialĀ link elements inside the head element that causeĀ images preloading.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button onclick="image.src='/static/bucket/1631898942509-VMYrnXyYZv--image.png'">Image 1</button>
<button onclick="image.src='/static/bucket/1574890428058-BZOQxN2D3p--image.png'">Image 2</button>
<button onclick="image.src='/static/bucket/1633375165831-yjQ7G6WQeL--image.png'">Image 3</button>
<br /><br />
<img id="image" src="/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<script>
window.image = document.querySelector('#image');
function preloadImage(url) {
var link = document.createElement('link');
link.href = url;
link.rel = 'preload';
link.as = 'image';
document.head.appendChild(link);
}
// images preloading (we can run it in window load event):
preloadImage('/static/bucket/1631898942509-VMYrnXyYZv--image.png');
preloadImage('/static/bucket/1574890428058-BZOQxN2D3p--image.png');
preloadImage('/static/bucket/1633375165831-yjQ7G6WQeL--image.png');
</script>
</body>
</html>