Comment annuler le chargement de l'image

J'essaie de réduire le trafic consommé. C'est pourquoi je dois annuler le chargement des images inutiles. Comme je suis en train d'annuler le chargement de quelques images, pas tous, donc je ne peux pas utiliser la méthodeComment annuler le chargement de l'image

window.stop();

Je tentais de remplacer SRC d'images inutiles à la valeur de chaîne vide

img.src = '';

Mais il fonctionne dans Chrome et Opera et sti Je vais essayer de charger au moins une partie de l'image (quelques kb de toute la taille de l'image). Ce n'est pas une solution, mais cela aide à réduire la quantité de trafic consommée. Mais cette solution n'est pas bonne pour Firefox et Safari. Aussi j'ai essayé de changer

img.src = '1px.png';

avec une petite taille (1 Ko ou moins), mais il est toujours pas une solution.

J'ai également essayé de supprimer l'élément du HTML.

img.parentNode.removeChild(img);

Ce code aide juste pour supprimer des éléments de HTML, mais les images sont continuer à charger.

Existe-t-il une solution efficace qui fonctionne dans tous les navigateurs et annule complètement le chargement de l'image?

Source

2017-10-07 zhuravlyov

[Tout à propos de l'image de chargement paresseux] (https://www.google.com/search?q=image+lazy+ loading & rlz = 1C5CHFA_frBD695BD695 & oq = image + laz & aqs = chrome.0.69i59j69i57j69i60l3j0.2349j0j7 & sourceid = chrome & ie = UTF-8). –

Je sais beaucoup de chargement paresseux. Mais ce n'est pas une solution.La question était de savoir comment annuler/annuler le chargement de l'image. – zhuravlyov

Ensuite, ne chargez pas du tout les images et chargez-les si nécessaire (chargement paresseux), n'est-ce pas la même chose? –

-1

Espérons que je peux aider ....

Je remarque que vous havent essayé le suivant encore:

$(document).ready(function() { 
    $("img").removeAttr("src"); 
});

Ou vous pouvez essayer (et changer l'URL de votre URL de l'image) ...

$(document).ready(function(){ 
    $('img[src*="image.com/img.png"]';) 
});

Une nouvelle idée (que je suis arrivé de here):

1) lancer une requête AJAX pour l'image, si elle réussit, l'image va dans le cache du navigateur, et une fois que vous avez défini l'attribut 'src', l'image est affichée depuis le cache

2) vous pouvez annuler le XHR

J'ai écrit un petit serveur avec l'émulation expresse du téléchargement d'image énorme (il attend juste 20 secondes, puis retourne une image). Ensuite, j'ai dans mon HTML:

<!DOCTYPE html> <html> 
    <head> 
     <style> 
      img { 
       width: 469px; 
       height: 428px; 
       background-color: #CCC; 
       border: 1px solid #999; 
      } 
     </style> 
    </head> 

    <body> 
     <img data-src="./img" src="" /> 
     <br /> 
     <a id="cancel" href="javascript:void(0)">CANCEL</a> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
     <script> 
      $(function() { 
       var xhr, img = $('img'), src = img.data('src'); 

       xhr = $.ajax(src, { 
        success: function (data) { img.attr('src', src) } 
       }); 

       $('#cancel').click(function(){ 
        xhr.abort(); 
       }) 
      }); 
     </script> 
    </body> </html>

Hope that helps :)

Source

2017-10-07 02:10:51 Jesus

Ce n'est pas une solution, les images sont encore en train de charger – zhuravlyov

@zhuravlyov J'ai ajouté une troisième solution possible qui devrait fonctionner :) – Jesus

XMLHttpRequest n'est pas une solution aussi :(parce que nous avons un HTML statique avec des valeurs src :( – zhuravlyov

Comment annuler le chargement de l'image

Répondre

Questions connexes