How to check whether image is loaded or not?
To check for an image whether it is loaded or not in order to perform some actions can be done by using JavaScript. In many cases our browser fails to load the image due to large size of image, or poor network connectivity. So our image may sometimes show some errors. So to know whether our image is loaded or not we have certain methods such as onload(), onerror() and complete property.
Syntax
The syntax to solve the problem are −
- onload=»function()» − This function is called when the image is loaded successfully. In this any callback function is passed to perform a specific action.
- onerror=»function()» − This function triggers when the image faces a problem while loading due to any reason.
- selector.complete − The selector.complete method selects the image with class name, id or by Tag name and then it checks whether the image is loaded completely or not.
To check for the loaded image we have two approaches
Method 1 − In this approach we will use two methods onload() and onerror(). In these two methods, a function will be passed as an argument which will be called on the load of the browser and will check whether an image is loaded or not.
Algorithm
- Step 1 − Create an image tag in HTML and insert a link or path of an image in src attribute .
- Step 2 − Access the image tag and store it in variable.
- Step 3 − Use load() method and error() method in the addEventListener().
- Step 4 − If on loading the browser the image is loaded successfully the load event will trigger and will return a particular action, otherwise if the image is unable to load then the error event will trigger.
Example
body < min-height: 90vh; display: flex; flex-direction: column; place-content: center; background-color: #0a0a0a; color: white; text-align: center; >img
Which there was no error while loading an image on the web browser. So in the example the load() method in the addEventListener() triggers with the output “Image Loaded Successfully”.
Method 2 − In this approach we call the complete() method of an image object, which checks whether the image is loaded completely and on that behalf it returns true or false. When the image faces any problem in loading it returns false otherwise true.
Algorithm
- Step 1 − Create an image tag in HTML and insert a link or path of an image in src attribute .
- Step 2 − Access the image tag and store it in variable.
- Step 3 − Use complete() method of image object. If the image is loaded in the browser it will alert true on the browser, otherwise it will alert false on the browser.
Example
body < min-height: 90vh; display: flex; flex-direction: column; place-content: center; background-color: #0a0a0a; color: white; text-align: center; >img
The above code shows the output for which the complete() method returns true.
Conclusion
The return type of complete() method is Boolean as it returns true or false on the basis of current situation. The image cannot be loaded in certain situations such as wrong URL of an image, poor internet connectivity, image is not present in the located directory. The above solution is helpful in many cases as it triggers a particular action when the image is fully loaded. The image object in JavaScript contains many methods that help manipulate the image in the DOM.
Javascript check image loading
- Difference between HTML and CSS
- What are physical tags in HTML?
- HTML | Deprecated Tags
- Container and Empty Tags in HTML
- HTML Comments
- How to set background image in HTML ?
- How to define a list item in HTML5?
- Difference between semantic and non-semantic elements
- How to Create Color Picker input box in HTML ?
- HTML Hex Color Codes
- HTML Block and Inline Elements
- HTML Drag and Drop
- How to set the name for the object in HTML5?
- How to add space between elements ?
- How to create a clickable button in HTML ?
- HTML Links
- How to link back out of a folder using the a-href tag?
- HTML ping Attribute
- HTML disabled attribute
- What is the use of “#” symbol in link URL ?
- How to create a link with a media attribute in HTML5 ?
- How to specify the source URL of the quote using HTML5 ?
- How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5 ?
- How to specify the hyperlink target for the area of an image in HTML5 ?
- How to make a HTML link that forces refresh ?
- How to set the language of text in the linked document in HTML5 ?
- How to specify what media/device the target URL is optimized for ?
- How to specify URL of resource to be used by the object in HTML5 ?
- How to use Anchor tag as submit button ?
- Elements of a form Tag
- How to set an alternate text for area in HTML5 ?
- How to specify one or more forms the object belongs to ?
- How to specify one or more forms the keygen element belongs to ?
- How to turn on/off form autocompletion in HTML ?
- How to specify that a group of related form elements should be disabled using HTML?
- How to specify how form-data should be encoded when submitting to server ?
- How to specify the URL that will process the data supplied through input(s) when the form is submitted?
- How to specify one or more forms the label belongs to ?
- How to specify multiple forms the select field belongs to in HTML ?
- How to change the type?
- How to specify which form element a label is bound to ?
- How to create a multiline input control text area in HTML5 ?
- How to create form validation by using only HTML ?
- HTML Emojis
- How to animate a straight line in linear motion using CSS ?
- How to specify the media type of the script in HTML5 ?
- How to display video controls in HTML5 ?
- How to mute video using HTML5 ?
- How to add controls to an audio in HTML5 ?
- Create Scanning Animation Loader using HTML & CSS
- How to specify media type of data specified in data attribute in HTML5 ?
- How to set the height and width of the video player in HTML5 ?
- How to check whether an image is loaded or not ?
- How to specify the type of the media resource in HTML5 ?
- How to Create Image Hovered Detail using HTML & CSS ?
- How to define media type of style tag in HTML5 ?
- How to set multiple media resources for elements in HTML5 ?
- How to set a single line break in HTML5 ?
- How to create a progress bar using HTML and CSS?
- How to create Perspective Text using HTML & CSS ?
- How to isolate a part of text that may be formatted in a different direction using HTML5 ?
- Design an Event Webpage using HTML & CSS
- How to Skew Text on Hover using HTML and CSS?
- Programming a slideshow with HTML and CSS
- How to specify that an option-group should be disabled in HTML5 ?
- How to disable the drop-down list in HTML5 ?
- How to define scalar measurement within a given range in HTML5 ?
- How to set the security algorithm of key in HTML5 ?
- How to set minimum and maximum value of range in HTML5 ?
How to Check if All Images are loaded with JavaScript
There are several reasons why you might want to detect if images have finished loading on a webpage. For example, if your page relies on images to display content, it’s important to ensure that the images are loaded before the content is displayed. Or you may want to trigger certain actions on your webpage after all the images have finished loading.
However, detecting when images have finished loading using JavaScript can be somewhat challenging, especially if the images are using lazy loading.
Problem with using Load Event
Normally, to detect when a webpage has finished loading (including all images), you can use the window.onload event. This event is triggered when the entire page, including all assets such as images and stylesheets, has finished loading.
To specifically detect if all images on a webpage have been loaded, you can use the window.Image constructor to create an image object for each image on the page, and then set the src attribute of the image object to the URL of the image. Then, you can use the window.Image object’s onload event to detect when each image has finished loading.
function checkImagesLoaded() < // Get all the images on the page var images = document.querySelectorAll('img'); for (var i = 0; i < images.length; i++) < var img = new window.Image(); img.src = images[i].src; img.onload = function() < imagesLoaded++; >> if (imagesLoaded == images.length) < // If all the images have finished loading, do something console.log('All images have finished loading'); >> However, if the images on the webpage are using lazy loading, the method described above will not work as expected. This is because the window.Image constructor and the onload event are only triggered when the src attribute of an image is set, and lazy-loaded images do not have their src attribute set until they are scrolled into view.
Working with Lazy Loading Images
To detect when lazy-loaded images have finished loading, you will need to use a different approach. One option is to use the IntersectionObserver API, which allows you to detect when an element becomes visible in the viewport. You can use the IntersectionObserver to monitor the lazy-loaded images and detect when they become visible, at which point you can increment a counter to track the number of images that have finished loading.
This method is suitable for detecting when both non-lazy-loaded and lazy-loaded images have finished loading.
var observer = new IntersectionObserver(function(entries) < entries.forEach(function(entry) < // If the image has become visible in the viewport if (entry.isIntersecting) < imagesLoaded++; // Unobserve the image observer.unobserve(entry.target); >>); // Check if the number of images that have finished loading is equal to the total number of images if (imagesLoaded == images.length) < console.log('All images have finished loading'); >>); // Get all the lazy-loaded images on the page var images = document.querySelectorAll('img[data-src]'); // Loop through the images and observe them images.forEach(function(image) < observer.observe(image); >); That’s all for this tutorial. If you like it, check out our YouTube channel and our Facebook page to stay tune for more dev tips and tutorials
TK Engineer, Web Developer, Ex-Mutual Funds Software Developer. He founded Red Stapler in 2015 to share useful resources for everyone interested in web design, web development and programming. Subscribe his YouTube Channel or Twitter for weekly tips and tutorials.