Arrêter le chargement des images sur un événement hashchange via JavaScript ou jQuery

J'utilise le plugin jQuery BBQ: Back Button & Query Library pour créer une page qui tire le contenu dynamique lorsqu'un lien est cliqué. Lorsque le lien est cliqué, le hash est modifié et le nouveau contenu est tiré (l'action "par défaut" de cliquer sur un href est donc désactivée).

Cette partie fonctionne très bien, mais il y a un problème.

Exemple de mon problème


Dites que la page "home" a un DIV un certain nombre d'images et une liste de liens …

  • Page un
  • Deuxième page
  • Page Trois

Les images peuvent prendre un certain temps à charger, tandis que l'utilisateur n'attend souvent pas qu'elles se chargent complètement et cliquez sur le lien "Page One".

Cela efface le contenu de la page "Accueil" et les charges dans le contenu "Page One". Cela fonctionne bien.

Le problème est que les images de la page "Accueil" sont encore en cours de chargement dans le navigateur, même si l'utilisateur est passé de la page "Accueil".

Je sais que cela se produit parce que la page n'a pas réellement changé et j'utilise le hack hashchange du plugin BBQ, mais je veux savoir s'il existe un moyen de JavaScript de dire à toutes les images en cours de chargement de s'arrêter sur un événement hashchange ?

?? Un exemple de code serait comme …


$(window).bind('hashchange', function () { //code to stop images from loading // now load in new HTML content }); 

J'ai testé cette solution dans WebKit (Chrome / Safari), Firefox et IE et ça semble fonctionner.

J'ai utilisé une fonction qui utilise window.stop (); Pour la plupart des navigateurs, et la façon dont IE l'utilise si le navigateur ne supporte pas window.stop ()

Voir plus ici: https://developer.mozilla.org/fr/DOM/window.stop

Ainsi, pour les navigateurs qui le supportent (Firefox, WebKit) utilisent:

 window.stop(); 

Pour l'utilisation d'IE:

 document.execCommand("Stop", false); 

Cependant, soyez prudent …

Il s'agit essentiellement d'appuyer sur le bouton "Arrêter" dans le navigateur afin que tout ce qui est actuellement téléchargé s'arrête, et pas seulement les images (comme je le voulais).

Donc, à l'intérieur …

 $(window).bind('hashchange', function () { }); 

Voici la fonction que j'ai utilisée …

 function stopDownloads() { if (window.stop !== undefined) { window.stop(); } else if (document.execCommand !== undefined) { document.execCommand("Stop", false); } } 

Je suis assez confiant pour que ce ne soit pas possible (mais je serais heureux d'être trompé).

La raison en est est que les images intégrées dans votre site Web entraînent la transmission de requêtes HTTP GET à votre serveur. Une fois cette demande envoyée, votre serveur va traiter et répondre à cette demande, qui sera gérée par le navigateur.

Maintenant, si cela est possible, je suppose que cela impliquerait soit de parcourir chaque image et d'annuler son attribut src (ce que je ne pense pas fonctionner, car, comme je l'ai dit, les demandes ont déjà été envoyées). Soit, soit en appelant un mécanisme (susceptible de dépendre du navigateur) qui arrête le chargement de l'image.