I have started using jQuery and jasmine to automate webpage testing.

From what I understand, by calling $( document ).ready() would make sure that a webpage would finish loading.

But for the webpage I am testing, after $( document ).ready() returns, the background image of the webpage is still not loaded.

Did I mis-interpretate the definition and purpose of $( document ).ready()?

  • What front- end framework you are interacting with? like Angular or react etc? – Vishal Aggarwal Sep 20 '18 at 8:18
  • @V.A., react is the front end – Yu Zhang Sep 20 '18 at 10:12

As it is stated on jQuery site

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

So to get DOM ready it is not necessary to load the resources to the client. It is enough to know the meta-information of a node that would load the resource. To wait for resources to be loaded you should use $( window ).on( "load", function() { ... }).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.