Arrêter le chargement d'images en javascript (lazyload)?

Je suis en train d'arrêter le chargement d'images avec javascript sur les dom prêt et puis init le chargement à chaque fois que je veux, ce qu'on appelle le chargement différé des images. Quelque chose comme ceci:


$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});

Cela ne fonctionne pas (testé dans ff3.5, safari 3-4). Les images devient chargé de toute façon, je n'ai pas l'obtenir.

L'exemple de ce plugin, www.appelsiini.net/projects/lazyload, est en train de faire exactement la même chose, la suppression de l'attribut src de chargement de page.

Ce qui me manque?

EDIT: j'ai ajouté une page de test ici: http://dev.bolmaster2.com/dev/lazyload-test/
J'ai d'abord supprimer l'attribut src complètement, puis après 5 secondes, je l'ajouter avec l'image d'origine. Ne fonctionne toujours pas, au moins firebug dit que les images sont chargées au démarrage, est firebug faire confiance?

cela ne fonctionne toujours pas?
non, désolé, ça ne marche pas

OriginalL'auteur bolmaster2 | 2009-08-27

  1. 1

    Je pense que le problème est que vous videz le 'img' attribut, et non pas la 'src'.

    Si vous testez ce sur une page locale, alors votre local peut que les images de chargement trop vite. Ou peut-être qu'ils sont prises directement à partir de la mémoire cache du navigateur. Essayez de vérifier si l'image est déjà chargée avant de la vider de son 'src'.

    oups, désolé, c'est était juste une faute de frappe! modifié la question maintenant
    Si vous testez ce sur une page locale, alors votre local peut que les images de chargement trop vite. Ou peut-être qu'ils sont prises directement à partir de la mémoire cache du navigateur.
    il se sent comme im obtenir différents résultats de mes tests tout le temps. je vais créer un test-page.
    Vous devez modifier votre réponse à celui que vous avez donné dans le commentaire. Peut-être que vous pouvez obtenir un crédit que LA réponse..
    Bon, va le faire, merci 🙂

    OriginalL'auteur n1313

  2. 4

    essayer removeAttr("src"); comme dans http://www.appelsiini.net/projects/lazyload

    $(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

    Si cela ne fonctionne toujours pas. Cochez cette.chargé - peut-être qu'ils sont chargés trop vite.

    oups, désolé, c'est était juste une faute de frappe! modifié la question maintenant
    je vais vérifier ça, merci

    OriginalL'auteur Eldar Djafarov

  3. 3

    Si votre objectif est d'empêcher le serveur de charger les images, puis en désactivant l'attribut "src" ne fonctionnera pas lorsque vous exécutez dans le document.prêt (au moins ce n'est pas toujours essayez de télécharger pinterest html par exemple et addy votre script pour enregistrer en html, vous verrez que le navigateur va demander les images à partir du serveur avant la src est désactivée).

    Au lieu de cela, vous pouvez essayer d'utiliser le même code (ou mieux, sans jQuery, pour s'assurer qu'il fonctionne aussi vite que possible) en le mettant dans la section "head" à l'intérieur d'un setInterval boucle qui va effacer l'attribut "src" de toutes les images dès que les balises sont présentes (avant de jQuery document prêt est tiré).

    Exemple:

    supprimer les images sans jQuery:

    function removeImagesBeforeTheyAreRequested(options) {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) { 
    var orgSrc = images[i].src;
    images[i].removeAttribute('src'); 
  }
}

    feu ce code dans la section "head", avant que le corps est prêt (essentiellement de surveiller l'existence de balises img):

    var timer = setInterval(function() {
   removeImagesBeforeTheyAreRequested();
}, 1);

    cesser d'essayer de chercher des images après 3 secondes: 

    setTimeout(function() { clearInterval(timer); }, 3000);

    Noter que vous pourriez vouloir vérifier si les images sont mises en cache avant de retirer leur attribut "src" (ceux qui seraient chargées par le navigateur vraiment rapide et il n'y a aucun point dans la suppression de leur "src" pour l'application de la suppression de la charge du serveur car elles ne sont pas demandées à partir du serveur de nouveau).

    OriginalL'auteur orcaman

  4. 1
    $(document).ready(function () {
    var images = $('img');
    $.each(images, function() {
        $(this).attr('src', '');
    });
});

    Cela ne marchera pas, parce que jQuery est appelé une fois la page chargée:

    $(document).ready()

    tout ce code serait en train de faire est de retirer le src de la valeur une fois que l'image a déjà été appelée à partir du serveur.

    Ce n'est pas vrai. $(document).ready() déclenche après que le DOM est chargé, notamment des feuilles de style et des scripts et à l'exclusion des images (ce que vous décrivez est document.body.onload ou window.onload). Si le navigateur est libre de rechange de connexions et à l'endroit où la page déclencheurs $(document).ready(), il est possible qu'elle ait déjà commencé à faire appel à images à partir du serveur. Toutefois, si vous avez beaucoup de non mise en cache des images, vous serez toujours à l'heure pour enlever l'image src attributs et donc la prévention de ces le chargement des images.

    OriginalL'auteur Deezilla

  5. 0

    Je ne sais pas si vous avez écrit de mal dans la question, mais l'attribut le vous devez définir une chaîne vide est "src" pas "img". Essayez ceci:

    $(document).ready(function () {
    var images = $('img');
    $.each(images, function() {
        $(this).attr('src', '');
    });
});
    oups, désolé, c'est était juste une faute de frappe!

    OriginalL'auteur mck89

  6. 0

    Je pense que votre problème est que vous êtes à l'exécution du code à l'intérieur de $(document).prêt, qui est appelée lorsque le document est prêt - ie. quand il est entièrement chargé, y compris les images. Le LazyLoad plugin est lié à ne pas utiliser $(document).prêt, et le script est placé dans l'en-tête, de sorte qu'il s'exécute avant/pendant le chargement de la page plutôt que par la suite.

    Qui ne devrait pas être le problème, parce que $(function(){}, celui qui LazyLoad plugin utilise, c'est juste un raccourci pour $(document).prêt, qui est exécuté lorsque le DOM est prêt, pas les documents contenu

    OriginalL'auteur Waggers

  7. 0

    Je vous conseille d'utiliser le Jquery Lazyload plug-in pour cela. C'est exactement ce que vous voulez.

    http://www.appelsiini.net/projects/lazyload

    Bien sûr, je pouvais le faire - mais cette question était plus sur la chose de base que le lazyload-plugin est en train de faire: le retrait de la src de l'image des éléments et POURQUOI il ne fonctionne pas.. Et après tout, il n'a fonctionné comme prévu, il était juste que les images mises en cache, même si je n'avais désactivé le cache sur l'extension web developer pour firefox.
    ATTENTION! Le Lazy Load Plugin peut endommager votre page de Résultats de Recherche Google - la suite les images sont pas indexés. Mieux utiliser quelque chose comme data-src en combinaison avec onload(), de sorte que chaque élément de l'enregistrement lui-même.

    OriginalL'auteur Slaggg

  8. 0

    J'ai eu le même problème lors de la mise au chargement de l'image sur le hover événement sur ma vignette de l'image, dans IE, il provoque un "Stack Overflow" quand j'ai passez la souris sur la miniature de l'image.

    Mais c'est résolu maintenant. Ce code a sauvé ma journée:

    $(document).ready(function() {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

    OriginalL'auteur lisa

  9. 0

    Avec JavaScript vous le faire de cette façon.

    var imagesArray = document.querySelectorAll('img');

for(var i=0; i<imagesArray.length; i++) {
    imagesArray[i].src = '';
}

    Envisager d'utiliser de la Vanille Javascript premier.

    OriginalL'auteur Sanket Sahu