jQuery, JavaScript, HTML: Diğer her şey yüklendikten sonra resimler nasıl yüklenir?

Question

hey guys, Çok fazla komut dosyası ve oldukça uzun bir yükleme süresi ile çok karmaşık bir sayfa var. Bu sayfanın üstüne jquery Nivo Slider'ı (http://nivo.dev7studios.com/) uygulamak istiyorum. ben oldukça büyük bir 1000x400px ile 10 görüntüleri olabilir Ancak bir div # kaydırıcı

<div id="slider"> 
    <img src="images/slide1.jpg" alt="" /> 
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> 
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> 
    <img src="images/slide4.jpg" alt="" /> 
</div> 

iç kaydırıcı ait tüm resimleri listelemek gerektiği yazıyor belgelerinde

. Bu görüntüler, sayfa yüklendiğinde yüklenir. Başlığımda oldukları için bu oldukça zaman alabilir.

Herhangi bir jquery Slider Eklentisini (nivo kaydırıcı gibi) kullanmanın bir yolunu arıyorum, ancak ya görüntüleri dinamik olarak yükleyin ya da sayfamdaki her şey yüklendikten sonra bu görüntüleri yükleyin.

Bunu nasıl çözebilirim?

Sayfadaki diğer her şey yüklendikten sonra javascript işlemini başlatmanın bir yolu var mı? Eğer bir yol varsa, benim sorunum için bir çözüm bulabilirim (jquery ajax load() yöntemini kullanarak) ... Ancak, her şeyin yüklenmesini beklediğimde hiçbir fikrim yok ve tüm görüntüleri içeren kaydırıcıyı başlatıyorum. Belge yüklendikten sonra

Answer 1

İşte yaptığımız ve çalıştığı harika. srcimg özniteliğini atlayıp lsrc sahte özniteliğine img-location ekledik. Daha sonra, lsrc değeri ile dinamik bir görüntü yükleriz ve gerçek görüntüyü yalnızca yüklendikten sonra src olarak ayarlarız.

Daha hızlı yükleme yapmakla kalmıyor, ancak görüntüleri yalnızca sayfanızda tam olarak yüklendiğinde göstermeye çalışıyor, böylece kullanıcının bu sıkıcı yarı dolu görüntüleri görmesi gerekmez. Gerçek görüntüler yüklenirken bir yer tutucu resmi kullanılabilir.

İşte kod.

$(function(){ 
    $.each(document.images, function(){ 
       var this_image = this; 
       var src = $(this_image).attr('src') || '' ; 
       if(!src.length > 0){ 
        //this_image.src = options.loading; // show loading 
        var lsrc = $(this_image).attr('lsrc') || '' ; 
        if(lsrc.length > 0){ 
         var img = new Image(); 
         img.src = lsrc; 
         $(img).load(function() { 
          this_image.src = this.src; 
         }); 
        } 
       } 
      }); 
    }); 

Düzenleme: Trick o kaynak geçici img yüklenen yalnızca src niteliğini ayarlamaktır.$(img).load(fn); bunu halleder.

Answer 2

jquery javascript yürütmek için bir sözdizimi vardır:

<script type="text/javascript"> 
jQuery(function(){ 

//your function implementation here... 

}); 
</script> 

Answer 3

check out jquery load() olay, her şeyin dahil grafik yüküne

$(window).load(function() { 
    // run code 
}); 

ardından yükleyebilir bekler kullanarak görüntüler:

var image = new Image(); 
image.src = "/path/to/huge/file.jpg"; 

Onload işlevini ekleyebilirsiniz. görüntüye çok Xhalent cevabı ek olarak

image.onload = function() { 
    ... 
} 

Answer 4

, DOM eklemek için jQuery .Append() işlevini kullanın:

HTML'iniz sadece olurdu:

<div id="slider"> 
</div> 

Ve sonra jQuery: