Javascript alert loads before page displays

Question

On my mobile, in safari If I go to my default page that has alert("Hello") on the body onload event, the alert displays with my default page fully visible in the background. If I then go to another site for example bbc.co.uk and then type in my the web address for my default page in the address bar, the alert shows with the BBC content in the background, its like the alert loads before the page has loaded.

How do I only show the message once the whole page is visible. I've read that window.onload waits until everything is loaded before it triggers the alert but I must be getting something wrong because the behaviour doesn't change. I've also tried:

$(document).ready(function () {
    window.onload= alert('Test');
});

and

<meta http-equiv="Pragma" content="no-cache"/>

in case it has something to do with cache but I don't think this is the issue. Any ideas ?

Thanks

[Difference between $(document).ready and $(window).load in jQuery](http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/) — smilly92, Sep 05 '12 at 11:50

score 10 · Answer 1 · answered Sep 05 '12 at 11:41

10

You pass a reference to a function to the window.onload and not the actual call.

try

window.onload = function(){
 alert('test');
}

answered Sep 05 '12 at 11:41

Clyde Lobo

9,126
7
34
61

+1 for actually explaining why the user's code didn't work rather than just providing other code. The fact it would evaluate the alert before assigning it to the event is a subtle looking bug that is quite hard to spot if you don't specifically look for it (since the human observer knows what it means and doesn't think about what it actually says). – Chris Sep 05 '12 at 11:49
1

I have tried this and the alert still comes up with the referring page in the background. – mjroodt Sep 05 '12 at 12:14

score 3 · Answer 2 · edited May 23 '17 at 10:30

if you wanto display the alrert box either use window.onload there is no point in use both , here is code that will work fine

window.onload (which is implemented even in old browsers), which fires when the entire page loads

 window.onload = function(){  alert('test'); }

jQuery provides document.ready, which abstracts those away, and fires as soon as the page's DOM is ready

$(document).ready(function () {     
 alert('Test');  
});

Check answer from : window.onload vs $(document).ready()

window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera), jQuery provides document.ready, which abstracts those away, and fires as soon as the page's DOM is ready (doesn't wait for images etc.).

document.ready is a jQuery function, wrapping and providing consistency to the following events:

document.ondomcontentready / document.ondomcontentloaded - a newish event which fires when the document's DOM is loaded (which may be some time before the images etc. are loaded); again, slightly different in IE and in rest of the world
and window.onload (which is implemented even in old browsers), which fires when the entire page loads (images, styles, etc.)

Surely even if both together are unnecessary using both of them shouldn't cause it to run too early should it? — Chris, Sep 05 '12 at 11:42
The `ready` event occurs after the HTML document has been loaded, not when the entire page has been rendered... See http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready — smilly92, Sep 05 '12 at 11:42
Ah, another poster has the answer. your answer won't work because the code you've quoted will evaluate `alert('Test')` before assigning it to onload. You need to pass a function to onload. — Chris, Sep 05 '12 at 11:48

score 2 · Accepted Answer · answered Sep 05 '12 at 11:41

2

$(window).load(function() {
      alert('Test');
});

answered Sep 05 '12 at 11:41

Mihai Iorga

39,330
16
106
107

The alert still comes up before the page is visible. The referring page is still visible in the background. – mjroodt Sep 05 '12 at 12:08
I've had to use the setTimeout function as well as the jquery window.load. I have no idea why it didn't work but this worked for me. $(window).ready(function () { setTimeout(function () { alert("Test") }, 1000); }); – mjroodt Sep 05 '12 at 12:56

score -2 · Answer 4 · answered Sep 28 '17 at 17:51

-2

<!DOCTYPE html>
<html>
<body onload="show_popup()">

<script>
function show_popup() {
    alert("Popup shows");
}
</script>

</body>
</html>

answered Sep 28 '17 at 17:51

rehanoor

1
4

Javascript alert loads before page displays

4 Answers4

Linked