Görüntünün yüklenmesini beklemek Javascript'te

Bir Ajax çağrısı yapıyorum, bu da bana bir görüntü yolu da dahil olmak üzere biraz bilgi döndürüyor. HTML'mdeki tüm bilgileri bir çeşit pop-up olarak görüntülenecek şekilde hazırlıyorum. Ben sadece pop-up penceresinin görünürlüğünü görünce gizlice gösteriyorum.Görüntünün yüklenmesini beklemek Javascript'te

Pop-up div'umun konumunu ayarlamak için görüntünün yüksekliğine bağlı olarak hesaplamam gerekiyor. Bu yüzden, görüntüyü konumlandırmadan ve görünürlüğü görünür hale getirmeden önce boyutunu bilmek için resmin yüklenmesini beklemek zorundayım.

Yineleme sırasında yinelemeli, setTimeout, tam img özelliği olan hileleri denedim ... başarı olmadan.

Peki, bunu nasıl yapabilirim? Belki de Ajax çağrımdaki boyutları döndürmeliyim.

kaynak

2010-02-26 Jeenyus

etkileyebilecek harici web sayfasından yüklemek, neden "Image.complete" özelliği ile çalışmaz? –

var img = new Image(); 
img.onload = function() { alert("Height: " + this.height); } 
img.src = "http://path/to/image.jpg";

Not: İlk işleyicisi takmak, sonrasrc set

örneğe bakın. Bunu başka bir şekilde yaparsanız ve görüntü önbellekte ise, etkinliği kaçırabilirsiniz. JavaScript tarayıcılarda tek bir iş parçacığında çalıştırılır (web çalışanları kullanmıyorsanız), ancak tarayıcıları tek iş parçacıklı değildir. Tarayıcının src numarasını görmesi, kaynağın kullanılabilir olduğunu tanımlaması, yüklemesi, olayı tetiklemesi, geri arama için kuyruğa alınması gereken herhangi bir işleyiciye sahip olup olmadığına bakmak için öğeye bakması, öğeyi görmemesi olay işleme, hepsi src hattı ve işleyiciyi ekleyen satır arasında. (Kayıtlar, satırlar arasında kaydedilmediyse, satırlar arasında olmazdı, ancak kuyrukta beklerlerdi, ancak herhangi bir olay yoksa, olayın beklenmesi gerekmez.)

kaynak

2010-02-26 14:18:42

+1 - Bu, gönderdiğim şeydir. –

Grat! BTW: AJAX konusuna oldukça cahil oldum, ama sadece AJAX ile bir görüntünün HTML koduna yazılan bir görüntü ile aynı şekilde önbelleğe alınmış olması durumunda, tarayıcının görüntü önbelleğini önlemek için bunu en sonunda ekleyebilirsiniz sadece ihtiyacınız varsa): img.src = "http: //path/to/image.jpg" + "? refresh =" + new Date(). getTime(); –

@Marco Ya da XHR'de 'önbellek: false 'ayarını belirtin :) AJAX çağrısı görüntünün kendisine değil, görüntünün kendisine bir URL döndürdüğü için bu konuyla ilgili olduğunu düşünmüyorum. Ancak evet, kullanıcı aracısı önbelleğe alma işleminin gerçekleşmediğinden emin olmak için hala rastgele bir sorgu dizesi değeri kullanabileceğini varsayalım. –

jQuery'yi kullanırsanız, load olayını kullanabilirsiniz. Yukarıda için bunu yapmak için önemli olduğunu

$('img.userIcon').load(function(){ 
    if($(this).height() > 100) { 
     $(this).addClass('bigImg'); 
    } 
});

kaynak

2010-02-26 14:16:51 Sagi

-1: Sorudaki jQuery'den bahsedilmiyor, bu yüzden böyle bir cevap oldukça kafa karıştırıcı olabilir. –

+46

jquery istendiği sürece jquery kullanmayın Lütfen –

Resim ile birlikte kullanıldığında lütfen aşağıdaki uyarılara dikkat edin (http: //api.jquery'den alınmıştır).com/load-event /): > Sürekli veya güvenilir çapraz tarayıcı çalışmıyor > Görüntü src > ile aynı src olarak ayarlanmışsa, WebKit'te düzgün çalışmıyor DOM ağacını doğru şekilde balonla > Tarayıcının önbelleğinde halihazırda var olan resimler için yangını durdurabilir –

Yavaş bir captcha aldım Sayfamda (1st_image) resim yükleme ve başka bir görüntü (2._image) sadece captcha görüntüsünün (1._image) yüklendikten sonra görüntülenmesini istedim. Bu yüzden ilk önce captcha (1st_image) resminin yüklenmesini beklemeliydim.

İlk önce bir görüntünün yüklenmesini bekleyip sonra başka bir görüntüyü yüklemesini beklemek gayet iyi bir çözümdür: (başka bir resmin yüklenmesini beklerken "lütfen bekleyin!"

<script> 
function checkImageLoad() { 
    if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");} 
    document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png"; 
} 
</script> 
<body onload="checkImageLoad();"> 
<img id="1st_image" src="http://domain.com/1st_image.png"> 
<img id="2nd_image" src="http://domain.com/loading_please_wait.gif">

ya internet hızı yavaş veya hızlı, tarayıcı (bunlar harici bağlantılı olsa bile) ve daha sonra işlevini yürütmek, bu nedenle 2 görüntü sadece görüntülenen tüm görüntüler ile tüm sayfayı yüklemeniz bekleyecek 1. görüntüden sonra iyi yükler.

Advanced Not: Önce bir web sayfası yüklemek ve ardından resmi göstermek için görüntünün "src" kısmında bir web sayfası URL'sini kullanabilirsiniz. Amaç, çerezi görüntülenen 2. resmi (captcha)

kaynak

2016-05-01 12:15:13 Tarik

Görüntünün yüklenmesini beklemek Javascript'te

cevap

İlgili konular