Annulation (HTML) Image Téléchargements

Question

J'ai une variété de jeux d'images que j'affiche sur une page Web (disons 50 images par jeu). Un utilisateur peut sélectionner un ensemble à afficher à partir d'une liste, qui est chargée via un appel ajax jQuery pour supprimer les anciennes balises img et ajouter les nouvelles. Ce que je vois, c'est que toutes les demandes pour le premier lot d'images périmées sont encore retirées du serveur, ce qui retarde le chargement de nouvelles images et tue l'UX. Donc ma question est: est-il possible de purger les demandes du navigateur pour le premier ensemble de img qui n'existent plus dans le DOM? Est-ce que ce n'est pas automatique?

Voici un exemple jQuery extrait du processus:

updateImages = function(imageSetId) { 
    // clear existing IMG set 
    $("#imagesDiv").empty(); 

    $.post(
     "/GetImagesInSet", 
     { imageSetId: imageSetId }, 
     function(data) { 
      // add in new IMG set 
      $("#imagesDiv").html(data); 
     }, 
     "html" 
    ); 
}; 

Mon attente était que l'appel à $() vide() empêcherait toutes les images en attente qui y vivent à retirer de la. demande de file d'attente. Je vais prendre des suggestions alternatives si c'est un mauvais design!

Answer 1

J'ai trouvé une meilleure alternative, qui consiste à utiliser une technique de chargement paresseux qui ne télécharge que les images visibles au lieu de toutes les images (c'est-à-dire celles qui défilent hors de la fenêtre). La fonction de recherche d'image de Bing.com en est un très bon exemple.

Voici un plugin jQuery qui fournit des fonctionnalités similaires: Lazy Load

regardant la source, il semble charger l'image chaque fois que la position logique de l'élément est supérieur à celui du fond de la vue logique. L'inconvénient de ceci est que toutes les images sont chargées lors du défilement même si l'image n'est jamais réellement dans la fenêtre. Par exemple, si vous faites défiler rapidement vers le bas de la page, l'ensemble des images au-dessus de la vue du cadre inférieur sont chargées, même si elles n'étaient pas vraiment nécessaires.

L'implémentation de Bing est plus robuste et ne charge les images que si elles sont réellement visibles. Je vais devoir tester ce plugin pour être sûr, mais la source est assez simple et probablement "réparable" si le besoin s'en fait sentir.

Answer 2

peine d'essayer:

$("img","#imagesDiv").attr("src",''); 
$("#imagesDiv").empty(); 

Je ne sais pas si vous pouvez supprimer les requêtes en attente de la file d'attente, mais ce serait certainement arrêter les nouvelles d'être générés.