Bir tarayıcının takılı bir öğeyi boyamayı bitirdiğinde nasıl belirlenir?

Question

AJAX aracılığıyla gönderilen HTML'yi enjekte eden bir web sayfam var. Bilmiyorum, a priori, içeriğin boyutu, ancak içeriği sayfaya göre boyutuna göre yerleştirmem gerekiyor.

1. Seti Üst konteynerin opaklığını 0.
2. için DOM'ye içerikler ekleyin: Burada çalışmıyor basit bir yaklaşım. Boyutları ölçün, örn. $el.outerWidth(true).
3. İçeriği bu boyutlara göre yerleştirin.
4. Ebeveyn taşıyıcısının opaklığını (arka) 1.0 olarak ayarlayın.

Bu yaklaşımdaki sorun, içeriğin oldukça karmaşık olması ve görüntüleri içermesidir. outerWidth() çağrıldığında, tarayıcı döndürülen boyutların doğru olmaması için ekranı yeniden boyamayı tamamlamamıştır. (İlginçtir, benim durumumda, başlangıç ​​boyutları her zaman beklediğim gibi değil, nihai değerlerden önemli ölçüde daha büyüktür.)

Sorunu 2 ve 3 numaralı adımlar arasında bir zamanlayıcı ayarlayarak azaltabilirim, ancak ne kadar uzun olursa olsun Zamanlayıcıyı yapıyorum, kesinlikle bazı sistemde onu aşacak bir tarayıcı olacak. Ve zamanlayıcıyı çoğu vakayı kapsayacak kadar uzun yaparsam, gereksiz gecikmeleri tanıyarak kullanıcıları daha hızlı sistemlerle cezalandıracaktır. Aşağıda atıfta bulunulan cevaplardan birkaçı bir setTimeout(fn, 0) yeterli olsa da, durumun böyle olmadığını buldum. 2012 MacBook Air'de 60 ms'ye kadar olan boya sürelerini ölçtüm ve bir cevap 500 ms.

Bir kerede Mozilla'nın benim problemimi çözmüş olabilecek bir onPaint event olması gibi görünüyor… eğer hala var ise ve diğer tarayıcılar onu benimsemişse. (Her ikisi de durum böyle değildir.) Ve Mutation Observers, öğelerdeki değişiklikleri bildirirken boya süresini hesaba katmıyor.

Çözümler veya yorumlar çok beğeni topladı. Aşağıda belirtildiği gibi, bu daha önce sorulmuştur ama soruların çoğu en az bir yaşında ve tekrar denemek için umutsuzum. Maalesef uygun cevap sunmuyoruz

---

İlgili sorular

• How to detect when an image has finished rendering in the browser (i.e. painted)?
• jQuery - How to execute script as soon as we know true height (with images) of ajax-loaded element?
• DIV width immediately after append is calculating wrong?
• jQuery returns height of 0 for div element immediately after appending element
• Javascript: unable to get height of newly created element
• jQuery: Why does .width() sometimes return 0 after inserting elements with .html()?

---

Güncelleme: Eh, sadece orada görünen bu sorun için genel bir çözüm değildir. Özel durumumda, içerik yüklendikten ve düzen tamamlandıktan sonra güvenilir bir şekilde değiştirilecek bir özellik buldum. JavaScript, bu özelliğin değiştirilmesi için anketler. Hiç de zarif değil, ama bulabildiğim en iyi seçenek buydu.

Answer 1

Pencere yükünün hile yapıp yapmayacağını görebilirsiniz.Yeni içerik yüklendiğinde veya birden fazla kez yüklendiğinden emin değilim.

ancak görüntüler için böyle bir şey kullanabilirsiniz.

// yükleme bitirdikten görüntüleri eşleşen sonra bir işlev çağrısı

function imagesLoadedEvent(selector, callback) { 
    var This = this; 
    this.images = $(selector); 
    this.nrImagesToLoad = this.images.length; 
    this.nrImagesLoaded = 0; 

    //check if images have already been cached and loaded 
    $.each(this.images, function (key, img) { 
     if (img.complete) { 
      This.nrImagesLoaded++; 
     } 
     if (This.nrImagesToLoad == This.nrImagesLoaded) { 
      callback(This.images); 
     } 
    }); 

    this.images.load(function (evt) { 
     This.nrImagesLoaded++; 
     if (This.nrImagesToLoad == This.nrImagesLoaded) { 
      callback(This.images); 
     } 
    }); 
} 

$("#btn").click(function() { 
    var c = $("#container"), evt; 
    c.empty(); 
    c.append("<img src='" + $("#img1").val() + "' width=94>"); 
    c.append("<img src='" + $("#img2").val() + "' width=94>"); 
    c.append("<img src='" + $("#img3").val() + "' width=94>"); 
    evt = new imagesLoadedEvent("img", allImagesLoaded); 
}); 

function allImagesLoaded(imgs) { 
    //this is called when all images are loaded 
    //console.log("all " + imgs.length + " images loaded"); 
} 

js fiddle for images loaded