Görsel ön yükleme tamamlanıncaya kadar Javascript engelleniyor mu? Aşağıdaki kod ile birkaç görüntü önceden yüklemek için javascript kullanıyorum

Question

:

// do the following for each image where 'this' is the path 
(new Image()).src = this; 

Bu iyi çalışır - kundakçı ben her resim indir her tekrardan sonra kapalı ateş olmak görebilirsiniz.

Sorunum, gerçek karşıdan yükleme tamamlanıncaya kadar engellemek istiyorum. Diğer bir deyişle, tüm resimler indirilene kadar kullanıcıya "görüntü indirme" iletişimini göstermek istiyorum.

Şu anda ön yükleme döngüsü yürütülmeden önce iletişim kutusunu gösterecek olursam (ve iletişim kutusu tamamlandıktan sonra iletişim kutusunu kaldırırsa), yalnızca indirme isteklerini gerçek indirme işlemi tamamlanmadığında yakalar.

Gerçek indirmenin eşzamansız olduğu göründüğü için, tüm indirmeler tamamlanana kadar engelleme yapmanın bir yolu var mı?

Answer 1

Sen resim başarıyla indirildiğinde ateşlenir onload yöntemi kullanabilirsiniz, daha sonra onload işlevinde sonraki adımı ayarlayın.

İşte W3 okulun referans var:

http://www.w3schools.com/jsref/event_img_onload.asp

Answer 2

Ön yükleme tamamlanıncaya kadar "yükleme" bölümünü gösterirken, görüntüleri önceden yüklediğiniz içeriği içeren divı gizleyebilirsiniz. Böyle bir şey olacaktır:

$('#content').hide(); 
$('#loading').show(); 

// for loop loading images here 

$('#loading').hide(); 
$('#content').show(); 

Answer 3

$(function() { 
    var imgs = $('img'); 
    var length = imgs.length; 
    var loaded = 0; 
    $('img').hide().each(function() { 
     $(this).bind('load', function() { 
      if ((++loaded) === length) { 
       imgs.show(); 
      }else { 
       //show images are still downloading 
      } 
     }); 
    }); 
});