Window onload event does not fire in ipad ios 8.4

Question

I am facing following strange issue:

Functionality:
When I open my website page which has many images and have javascript/jquery used for clie

Answer 1

I too recently encountered this issue. Sounds like a similar situation to yours Shubham.

TL;DR:

Various versions of iOS8 seem to prevent window onload from firing if an <audio> or <video> tag contain the attribute preload="none" (and maybe other variations)

It makes no sense to me seeing as a preload of "none" should in fact NOT be trying to load media data so why it interferes with window onload??

Further explanation:

In a Wordpress/WooCommerce site that I'd helped build, the client had several employees ALL with iPhone iOS 8.4.1. Three with an iPhone 5 and one with iPhone 6. TWO of them with iPhone 5 had issues, the other iPhone 5 user and the iPhone 6 user had no such issue so originally I assumed the issue lay with the order/speed of which some jQuery plugins may have loaded.

The symptoms were that things like the mobile navigation that should expand/contract and the AJAX search functionality would fail for these users and not function at all but all other browsers/desktops/Android tested were fine.

The site sells audio products, many with audio previews. After some (lots!) of testing I realised that the users did not have this issue when on a page WITHOUT an audio tag.

So I searched on iOS8, window onload and audio bugs and I found these two little gems that contained comments related to audio issues on various versions of iOS:

http://themeforest.net/forums/thread/ios8-safari-breaks-windowload-info-for-authors/147825?page=1&message_id=1154236#1154236 (user "tommusrhodus")

if you have any or tags in your page, then it’s currently going to be broken in iOS8 safari which never fires the window.onload event if these tags are present in the DOM.

https://github.com/codevise/pageflow/issues/118 (user "lufes"):

The problem is related to the window.onload event, which will not be triggered if there's a video or audio with the preload="none" attribute set. window.onload will run once every asset is loaded, and iOS 8 keeps waiting for the video to load, which will never do.

So the solution for me - since I didn't want to hack the Wordpress core - was to simply remove the preload attribute altogether via jQuery in a ready callback which would fire before the window onload like:

$("audio").removeAttr("preload");

Answer 2

I counldn't find the reason why the control does not fire window.onload event. But for those who will get into the same issue, I am posting here the other way round to solve this issue. (and obviously I dont want to get a tumbleweed badge..)

1. I have added most of the javascript in code behind (cs file) which was inside window.onload
2. As I am calling a javascript function jWDScrollWindow() on page load to scroll the page, I added the $(".lazy").unveil(); inside jWDScrollWindow() function itself.

This solves my issue in iPad, but the changes are not device specific.

function jWDScrollWindow() {
    //Apply lazy loading functionality to images
    $(".lazy").unveil();
    //scroll by 1px to load the images
    $(window).scrollTop($(window).scrollTop() + 1);
}

This is not a full-fledged solution to the issue but a work aournd. If someone has a reason or solution on this issue, please do post as an answer.

Answer 3

There is also a workaround:

var iOS8 = navigator.userAgent.match(/(iPad|iPhone|iPod).*OS 8_\d/i);
if( iOS8 ){
    setTimeout(function(){
        $(window).trigger('load');
    }, 3500);
}

This will trigger the load, and 'trick' Safari on iOS8 to think that the $(window) object was loaded, so the code inside the

$(window).on('load', function());

will work.

Hope this helps to anyone who is searching for this :)