Obrazy jQuery LazyLoad w ukrytym dziale

Question

Mam kilka obrazów, które znajdują się w ukrytym dziale div. Element div jest wyświetlany, gdy użytkownik kliknie na kilka linków.

Chciałbym, aby jzynowy lazyload ukrył te obrazy, dopóki nie kliknę linku i ukryty element div zostanie ujawniony. Ale jeśli używam lazyload zgodnie z dokumentacją, obrazy są zawsze ładowane, ponieważ ukryty div znajduje się w widocznym miejscu, prawdopodobnie.

jakieś pomysły?

Answer 1

Timo myślę, że i tak nie chce, że ładunki obrazów w DOM, zanim on ich potrzebuje. W pewien sposób jest to klasyczny scenariusz używania ajax do ładowania zawartości.

proponuję udać się o tym tak

$.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

Czy naprawdę potrzebujesz wtyczki Lazy Load? Co powiesz na zastąpienie zawartości div obrazem (ami) po kliknięciu linku?

Coś jak:

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

i

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

Answer 3

napisałem plugin jQuery, który używa html komentarzy załadować obu obrazów i dowolną html wewnątrz komentarza bloku.

Oto article/docs: http://bit.ly/eXxK1c

oto strona wtyczki: http://plugins.jquery.com/project/LazyLoadOnScroll

To działa tak:

<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> 

gdy wstępnie tagi stają się widoczne w okienku przeglądarki znaczniki zastępcze zostaną zastąpione ciągiem html wewnątrz komentarza. Możesz użyć dowolnego tagu jako symbolu zastępczego, a nie tylko pre, ale lubię pre, ponieważ renderuje się jako wymiar 0, gdy wewnątrz znajduje się komentarz.

Answer 4

Możesz również wypróbować to rozwiązanie. Jako pierwszy dać obrazu właściwego atrybutu Dane-swap z obrazu do adresu

<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> 

a następnie użyć jQuery aby zamienić atrybut dane-swap do src a co jest naprawdę ważne - sprawdzić, czy ten obraz nie został pokazany przed użyciem instrukcji if. Tylko dla wydajności :)

var imgs = $('.swapimg'); 

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