jQuery LazyLoad images dans un div caché

Question

J'ai un tas d'images qui sont dans un div caché. La div est affichée lorsque l'utilisateur clique sur certains liens. Je voudrais jQuery lazyload pour cacher ces images jusqu'à ce que le lien soit cliqué et le div caché est exposé. Mais, si j'utilise le chargement par lazard selon la documentation, les images sont toujours chargées car la div cachée est dans la fenêtre, vraisemblablement.

des idées?

Answer 1

Timo Je pense qu'il ne veut pas de toute façon que les images de charges dans le Royaume avant qu'il en a besoin. D'une certaine manière, c'est un scénario classique de l'utilisation ajax pour charger le contenu.

Je propose que vous allez à ce sujet comme celui-ci

$.fn.image = function(src, f) { 

     return this.each(function() { 

      var i = new Image(); 

      i.src = src; 

      i.onload = f; 

      this.appendChild(i); 

     }); 
    } 

    $(function() { 


     $('yourlink').click(function() { 

      $("#container").image("image.jpg", function() { 

       alert("image loaded"); 

      }); 
     }); 

    }); 

Answer 2

Avez-vous vraiment besoin du plugin de chargement paresseux? Que diriez-vous de remplacer le contenu div par l'image (s) lorsque vous cliquez sur le lien?

Quelque chose comme:

<a href="link" onclick="show_images('div_id');">asdf</a> 

et

function show_images(id) { 
    $('#' + id).append('<img src="image1.jpg" /><img src="imagex.jpg" />'); 
} 

Answer 3

J'ai écrit un plugin jQuery qui utilise les commentaires HTML pour charger les images et tout html arbitraire dans un bloc de commentaire.

est ici l'article/docs: http://bit.ly/eXxK1c

Voici la page du plugin: http://plugins.jquery.com/project/LazyLoadOnScroll

Il fonctionne comme ceci:

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre> 

<pre class=”i-am-lazy” ><!– 
    <div>Whatever html you want lazy loaded</div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 

$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 

</script> 

Lorsque les balises pré deviennent visibles dans la fenêtre du navigateur les balises d'espace réservé sont remplacés par la chaîne html dans le commentaire. Vous pouvez utiliser n'importe quel type de balise comme espace réservé, pas seulement pré, mais j'aime pre car il donne une dimension 0 quand il y a un commentaire dedans.

Answer 4

Vous pouvez également essayer cette solution. Comme d'abord donner une bonne image attribut échange de données avec votre image url

<div id="imgcontainer"> 
    <img data-swap="url/to/your/image1.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image2.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image3.jpg" class="swapimg" alt="image name"> 
</div> 

puis utilisez jquery pour échanger des attributs données-swap à src et ce qui est vraiment importante - vérifier si cette image n'a pas été démontré avant d'utiliser if. Juste pour la performance :)

var imgs = $('.swapimg'); 

$("#imgcontainer").click(function() { 
    if (imgs.attr("src") != imgs.attr("data-swap")) { 
     imgs.each(function() { 
      $(this).attr('src', $(this).attr("data-swap")); 
     }); 
    } 
});