Set a timeout for external files of a webpage with CasperJS

Question

I would like to set a timeout for external file of a webpage.

For example, I've the page index.php which contains images 1.jpg, 2.jpg and 3.jpg. 1.jpg and 2.jpg are small and load quickly, but 3.jpg is very big. I would like to go to the nextstep as soon as the webpage it entirely loaded, or at max 10 seconds after the beginning.

How to do that with CasperJS (or PhantomJS) ?

do you mean you want to skip loading of 3.jpg until page is completely loaded? — Moazzam Khan, Aug 21 '13 at 12:55
I think that's what you are looking for: http://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded — Disa, Aug 21 '13 at 12:56
I want to do this with CasperJS. I want to wait that the page load during min(all_page_loaded, 10_seconds). — Kevin, Aug 21 '13 at 13:09

score 3 · Answer 1 · answered Sep 30 '13 at 21:07

@Kevin - without seeing your code it is nigh on impossible to really understand what you are asking. I assume that since you didn't seem to need the suggestions provided about document load that the timeout you are looking for is 100% in casper as part of a scenario/test.

That said then what you would need to look into would be the Casper testing framework for asynchronous actions: http://docs.casperjs.org/en/latest/modules/tester.html#begin Coupled with the casper selectors bit: http://docs.casperjs.org/en/latest/selectors.html

You should be able to run the casper.start or casper.wait. http://docs.casperjs.org/en/latest/modules/casper.html#wait Casper.start does not seem to have a timeout as an argument so if you are asking about moving to the next step of a casper.start after the timeout expires then that would be more complicated.

In short please provide a better explanation of your actual problem. PS. unless you really really want to test that the images loaded (like for layout or screenshot testing) then you can always pass the flag to run Casper and not have it load the images:

var casper = require('casper').create({ pageSettings: { loadImages: false }})

score 1 · Answer 2 · answered Aug 21 '13 at 13:07

If using jQuery, jQuery's load() will also help with your goal:

http://api.jquery.com/load-event/

example:

$(window).load(function(){
alert('This alert will be shown after the page is fully loaded with all images etc.');
});

With Vanilla JS, try window.onload = function(){ ... }

Set a timeout for external files of a webpage with CasperJS

2 Answers2