Düşünün () kırılgan aşağıdaki JavaScript kodu

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

Soru(s)

• Görüntü genişliği ve yüksekliği doğru hemen yapmalıyım?
• Tuval iş hemen çizmek gerekiyor?
• onload geri arama (src değiştirildi sonra set) çağrılması?

Deneysel Testleri
Benzer bir kod ile simple test page bir ben yarattım. Safari benim ilk testler, her iki tarafından açılış HTML sayfası yerel olarak (file:/// url) ve yükleme benim server, her şeyi gösterdi: yükseklik ve genişlik doğru, tuval çizmek çalışırveonload da tetikler.

Firefox v3.6 (OS X), tarayıcının başlatılması sonra sayfa yükleme genişliği/yüksekliği hemen ayarı drawImage() başarısız sonra doğru olmadığını gösterir. (onload işleyicisi yangın yok, ancak.) Sayfayı yeniden yükleme, ancak, genişliği/yüksekliği hemen ayarladıktan sonra, doğru olmak ve drawImage() çalışma gösterir. Aynı oturumda kullanılan hemen zaman Firefox önbelleğe verileri bir resim olarak URL içeriğini görünür ve kullanılabilir.

Chrome v8 Firefox gibi aynı sonuçları görüyorum: görüntüyü hemen kullanılabilir değil, ama uyumsuz 'yük' verileri URL. biraz zaman alır

Yukarıda mı ya da ne çalışmıyor deneysel kanıtı ek olarak, gerçekten bu davranmaları gerektiği hakkında görüşler bağlantılar isterim. Şimdiye kadar benim Google-fu bu iş için yapılmamıştır.

Sağlama Alıyorum
Yukarıda tehlikeli olabilir neden anlamıyorum olanlar için, bu gibi görüntüleri güvenli olması için kullanmanız gereken:

// First create/find the image
var img = new Image;

// Then, set the onload handler
img.onload = function(){
  // Use the for-sure-loaded img here
};

// THEN, set the src
img.src = '...';

Henüz hiç kimse bunun hakkında herhangi bir özellikleri bulmuş olarakgerekiyordavranılacağını, nasıl memnun olmak zorundayızyokdavranır. Aşağıda benim test sonuçları.

            | is image data usable right  | does onload callback set after src
            |     after setting src?      |   is changed still get invoked?
------------ ----------------------------- -------------------------------------
Safari  5   |             yes             |                  yes                
------------ ----------------------------- -------------------------------------
Chrome  8   | **no** (1st page load), but |                  yes                
FireFox 3.6 |  yes thereafter (cached)    |                                     
------------ ----------------------------- -------------------------------------
IE8         |    yes (32kB data limit)    |                  yes         
------------ ----------------------------- -------------------------------------
IE9b        |             yes             |                 **no**              
------------ ----------------------------- -------------------------------------

Özet olarak:

• Görüntü veri doğru veri urı ayarı sonra kullanılabilir olmasını kabul edemiyor; onload olay için beklemeniz gerekir.
• Internet Explorer 9, size bağlı olamaz src ayarladıktan sonra onload işleyicisi ayarlayın ve çağrılacak bekliyoruz.
• Öneriler"Güvenli oyun"(soru yukarıda) tek yol doğru davranışı sağlamak için.

Eğer herkes bu görüşler tartışmaya bulabilir, mutlu bir şekilde onların yerine cevap olarak kabul etmiyorum.