Strange jQuery $(window).load() behavior in Safari - javascript

I have a page being loaded in an <iframe>.
Inside the <iframe>, I have a function that patiently waits for the page to load using jQuery's $(window).load() event which is supposed to wait until ALL page content (images, javascript, css, etc.) is loaded before firing.
The function then calls back to the page loading the <iframe> using postMessage to send the height of the content in the <iframe> back.
I have tested the functionality in IE7, IE8, Firefox 2, Firefox 3, Opera, and Chrome and everything works fine. When I try to load the page in Safari, the function makes its call back before images are loaded...thus giving me the wrong page height.
Does anybody out there know how to force Safari to wait for images to be loaded before calling a function (jQuery solutions are preferable in this case)?

Checking for an offset forces safari for finish loading/layout out the content, it blocks javascript until the return completes. You can use it like this:
$(window).load(function() {
var block = document.body.offsetWidth;
//Rest of code...
});

Related

<object> onload not firing in Chrome

Loading a PDF in an <object> tag, I want to show an indicator while the document is being loaded instead of just an empty element, so I positioned a Load Panel over the <object>. I added a function to hide the panel:
function documentLoaded() {
// Code to hide panel here.
}
And set it to fire in the onload event of the <object> tag:
<object type="application/pdf" data="/documents/sample.pdf" onload="documentLoaded();"></object>
This is working exactly how I want it to in Firefox and in Edge, but when I tested it in Chrome the Load Panel never went away. When I debugged it I saw that the documentLoaded() function was never called at any point.
Is there another way to get this to work with Chrome, or another way completely to call a JS function once the PDF is ready?
document.querySelector('#load_panel').onload=documentLoaded()

Code works in Firefox but not in Chrome

This code works perfectly with Firefox but not with Chrome.
I'm using a webserver with chrome so the .load() works fine.
$(function(){
$("#header").load("header.html");
});
$(document).ready(function(){
$('#notif').text("5");
}
When I debug using chrome, the code executes fine but nothing is inserted in <span id="notif"></span>.
The <span id="notif"></span> that is in my header.html is loaded dynamically with JS.
Again, it works fine in firefox but not in Chrome.
the load is asynchronous, so the document will be ready (and have triggered) well before the end of the load.
In short $('#notif') does not exist when document is ready, because it is not loaded yet.
$(function(){
$("#header").load("header.html",function(){
$('#notif').text('5');
});
});
not the second parameter, the anonymous function, will start after the successful completion of the load.
the difference between firefox and chrome can be related to the speed of downloading, but I'm not 100% sure. More testing is needed.
sometimes (especially IE) debugging the code via a breakpoint, may cause enough delay to the document.ready trigger to have finished loading. So no "faults" are discovered.

Should a script load first or images?

I am using a JavaScript library to arrange few images on the webpage. The following browsers:
Firefox
IE 11
Microsoft edge
render the page as it was planned, the problem occurs with Chrome browser. It messes up the complete layout.
The above browsers don't load any content unless all the images have been downloaded, until then it shows a blank white screen, and all of a sudden it will show all the content rendered perfectly. And in case of Chrome, the browser displays content on the go, as in you can see the images appearing in a scanline fashion.
I've tried calling the function that arranges these images inside:
$(window).load(function() {})
and it didn't fix the issue, I tried calling this in the <head></head> and also just before closing </body>, that didn't fix it either. Is this a Chrome related issue?
What should be the correct point in time where the function should be called?
There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.
With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:
$('body').imagesLoaded( function() {
// images have loaded
});
There are also .done, .fail, .progress callbacks supported if you need, so check the docs.
In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load
In other cases, for example, adding some classes to the images, you can do it before the image load.
If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.
Images should load First as hidden, Then your script should run like
$(document).ready(function(){
// here do the scripting may be showing them one by one
});

Javascript is not getting executed when DOM/HTML is loaded browser cache

I am caching the dynamic content using the ETAG. There is javascript in tag which in turn located at the end of body tag. This script tag make changes in DOM elements. But when DOM/HTML is loaded from browser cache, javascript is not getting executed.
Any work around to make this work?
Also I am observing caching is working fine with Chrome and mozilla, but not with OPERA. Is there any specific reason/bug in opera, which is causing this issue?

Javascript onLoad on Safari keeps Loading

I have a javascript function that I want to call when the page loads. So I called the function using the body onLoad tag -
<body onload="function();" >
This works, but on the Safari browser, the application continues to show the loading symbol even after the function has finished execution. When I call the same function using a button click on the page, Safari behaves nicely and doesn't show the loading symbol after the function's execution.
I tested on Chrome and Firefox and I don't see this problem. I've also tried other ways of calling it on load -
$(document).ready(function() {
});
$(document).onload(function() {
});
But the problem persists on Safari. Any ideas ?

Categories

Resources