How to check if an HTML element is loaded or not using jQuery

By Saruque Ahamed Mollick

In this tutorial, I will show you an easy way to check HTML element is loaded or not using jQuery.

Sometimes it’s become important for us to detect if an HTML element on our webpage is loaded or not. In this post, I am gonna show you how to do that. Here you will learn to detect that using jQuery and I will use alert() here to show you if the script is working or not. But you can do whatever task you want after successfully loaded your HTML content or a particular HTML content.

Also read,

Real Time Chat Application PHP With File Transfer System AJAX

How to Hide HTML Element onclick in jQuery Easily



Check an HTML Element is loaded or not using jQuery

In the first place, create an HTML file where I am gonna have an iframe. My task is to print an alert message when the iframe gets fully loaded. ( You can use your own HTML element instead of iframe, you can use image or anything )

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="https://codespeedy.com"></iframe>


</body>
</html>

This is the HTML file. Now I have to check if the iframe with id myframe is fully loaded or not.

To check that you can use the below script.

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="https://codespeedy.com"></iframe>
<script type="text/javascript">
  $('#myframe').on('load',function(){
    alert('iframe loaded');
    

  });
</script>


</body>
</html>

This script should work on your browser fine.
Please note that in the previous versions of jQuery (before version 3.0) load function worked fine, but now that does not work fine anymore that’s why I have used this

$('#myframe').on('load',function(){
 alert('iframe loaded'); 
});

This will print an alert message saying iframe loaded.

You are always welcome to comment in the below comment section.

Furthermore, You may also like,

Calculate the distance between mouse and element in jQuery

Free Currency Converter PHP using Fixer io API

 

Leave a Reply

Your email address will not be published. Required fields are marked *