L’événement Window onload ne se déclenche pas dans ipad ios 8.4

Je suis confronté à un problème étrange suivant:

Fonctionnalité:
Lorsque j’ouvre ma page de site Web qui contient de nombreuses images et dont javascript / jquery est utilisé pour les fonctionnalités côté client. En cliquant sur chaque image, toutes les autres images changent d’opacité et l’image sélectionnée affiche un

contenant des informations et une vidéo pour l’image.

J’ai utilisé jquery unveil qui charge toutes les images uniquement après le déclenchement d’un événement de défilement sur la page. Jusque-là, il affiche une image de “chargement”.
J’ai ajouté un événement javascipt sur window.onload pour redimensionner l’élément
lorsque vous cliquez sur l’image. Et du javascript qui identifie le navigateur et définit la source de balise vidéo en conséquence.
Toutes les images sont rendues dans un datalist et sont liées à une firebase database.
Comme unveil ne charge l’image qu’après un événement de défilement, j’ai ajouté un code lors du chargement de page pour faire défiler une page d’un pixel artificiellement.

Problème:
J’ouvre la même page dans iPad (iOS 8.4) sur Chrome ou Safari. Tout mon javascript sous window.onload ne se déclenche pas.

Page ASPX:

Code CS:

 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //Bind data list dlPersonList.DataSource = SelectPersons(); dlPersonList.DataBind(); // Register the script for slide up effect Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "scriptPerson", @"$(document).ready(function () { jWDScrollWindow();});", true); } } protected void dlPersonList_OnItemDataBound(Object sender, DataListItemEventArgs e) { /*Lazy loading functionality*/ //Set the image source as loader image imgPersonPicture.Atsortingbutes.Add("src", "/img/loading.gif"); //set image resource as actual image imgPersonPicture.Atsortingbutes.Add("data-src", imageObject.ImagePath.TrimStart('~')); }

Code JS:

 window.onload = function () { //Apply lazy loading functionality to images $(".lazy").unveil(); //Javascript to set the width and height of the details div . . //Javascript to blur all the other images when one image is clicked } function jWDScrollWindow() { //scroll by 1px to load the images $(window).scrollTop($(window).scrollTop() + 1); }

Choses que j’ai encore essayées:

Je pensais que jQuery dévoiler pourrait avoir rendu la page lente ou quelque chose. donc, j’ai supprimé l’appel, mais le problème est unveil(); est appelé dans window.onload . Donc, si window.onload n’est pas déclenché, il n’a aucun sens à supprimer le dévoilement.
J’ai ajouté une alerte () sur window.onload() , mais dans ce cas, tout fonctionne parfaitement.

Toutes les fonctionnalités fonctionnent parfaitement dans tous les appareils, à l’exception de l’ipad avec ios 8.4 (il fonctionne très bien même dans les versions antérieures)

Aide / Suggestions sont très appréciés.

MODIFIER:
J’ai trouvé une jsconsole à travers laquelle nous pouvons voir les journaux de la console dans iPad sur le bureau. Voici comment nous pouvons l’utiliser.
J’ai vérifié les journaux et constaté que lorsque JQMIGRATE: jQuery.browser is deprecated erreur JQMIGRATE: jQuery.browser is deprecated , mon événement window.onload ne se déclenche pas. Alors que, si je me connecte JQMIGRATE: Logging is active , tout fonctionne JQMIGRATE: Logging is active . Ma référence jqmigrate est en page maître en tant que,

J’ai aussi récemment rencontré ce problème. Cela ressemble à une situation similaire à la vôtre Shubham.

TL; DR:

Diverses versions d’iOS8 semblent empêcher le chargement de window onload si une ou contient l’atsortingbut preload="none" (et peut-être d’autres variantes).

Cela n’a aucun sens pour moi de considérer comme un préchargement de “néant” ne devrait PAS essayer de charger des données multimédia, alors pourquoi gêne-t-il le chargement de la fenêtre?

Plus d’explications:

Sur un site WordPress / WooCommerce que j’avais aidé à créer, le client avait plusieurs employés, TOUS avec iPhone iOS 8.4.1. Trois avec un iPhone 5 et un avec l’iPhone 6. DEUX d’entre eux avec l’iPhone 5 avait des problèmes, l’autre utilisateur de l’iPhone 5 et l’utilisateur de l’iPhone 6 n’avaient pas ce problème, alors à l’origine, j’ai supposé que le problème résidait dans l’ordre et la vitesse dont certains jQuery des plugins ont pu être chargés.

Les symptômes étaient que des éléments tels que la navigation mobile qui devait s’étendre / se contracter et la fonctionnalité de recherche AJAX échoueraient pour ces utilisateurs et ne fonctionneraient pas du tout, mais tous les autres navigateurs / ordinateurs de bureau / Android testés allaient bien.

Le site vend des produits audio, beaucoup avec des aperçus audio. Après quelques essais, j’ai réalisé que les utilisateurs ne rencontraient pas ce problème lorsqu’ils se trouvaient sur une page SANS balise audio.

J’ai donc cherché sur iOS8 , les fenêtres sur la charge et les bogues audio et j’ai trouvé ces deux petits joyaux contenant des commentaires liés à des problèmes audio sur différentes versions d’iOS:

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

si vous avez des balises ou des balises dans votre page, le safari iOS8 ne fonctionnera pas, ce qui ne déclenche jamais l’événement window.onload si ces balises sont présentes dans le DOM.

https://github.com/codevise/pageflow/issues/118 (utilisateur “lufes”):

Le problème est lié à l’événement window.onload, qui ne sera pas déclenché s’il existe une vidéo ou un fichier audio avec l’atsortingbut preload = “none”. window.onload sera exécuté une fois que tous les actifs auront été chargés et iOS 8 continuera à attendre le chargement de la vidéo, ce qui ne se fera jamais.

Donc, la solution pour moi – puisque je ne voulais pas pirater le kernel de WordPress – consistait simplement à supprimer l’atsortingbut de préchargement via jQuery dans un rappel prêt qui se déclencherait avant que la fenêtre ne se charge comme:

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

Il existe également une solution de contournement:

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

Cela déclenchera le chargement et «trompera» Safari sur iOS8 pour lui faire croire que l’object $(window) été chargé. Le code à l’intérieur du

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

marchera.

J’espère que cela aide à tous ceux qui recherchent cela 🙂

Je ne peux pas trouver la raison pour laquelle le contrôle ne déclenche pas l’événement window.onload . Mais pour ceux qui vont s’attaquer au même problème, je propose ici l’inverse pour résoudre ce problème. (Et évidemment, je ne veux pas obtenir un badge tumbleweed ..)

J’ai ajouté la plupart du code javascript derrière (fichier cs), qui se trouvait à l’intérieur de window.onload
Comme jWDScrollWindow() une fonction javascript jWDScrollWindow() au chargement de la page pour faire défiler la page, j’ai ajouté le $(".lazy").unveil(); dans la fonction jWDScrollWindow() elle-même.

Cela résout mon problème sur iPad, mais les modifications ne sont pas spécifiques à l’appareil.

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

Ce n’est pas une solution à part entière au problème, mais un travail quotidien. Si quelqu’un a une raison ou une solution à ce problème, postez-le comme réponse.