2010-12-23 16 views
7

javascript ile çok yeni.Javascript document Yazma üzerine yazı yazmak mı istiyorsunuz?

Önceden yüklenmeden önce görüntüleri gizleyen bir stil eklemek için document.write (Wordpress ile) kullanarak bir etiket oluşturmaya çalışıyorum. CSS ile yüklenmeden önce görüntüleri gizlemek için Javascript stili yazmaya başvurdum. Aslında, kullanıcının Javascript'i devre dışı bırakması durumunda CSS dosyasına yazmak istemiyorum ve daha sonra görüntüler asla gösterilmeyecek.

jQuery(function($) { 
    document.write('<style type="text/css"> .preload img { display: none; } </style>'); 
    $('#body-wrap').preloadThis(); 
}); 

Ama, bu sadece tüm sayfayı üzerine.Yapıyor ve boş gitmek yapma:

işe bu kodu almak için çalışıyorum. Bunu nasıl durdurabilirim? Etiketi sayfayı kaldırmadan eklemek istiyorum. 'Return' kullanarak denedim, şans yok.

Üzgünüz, ben bir acemiyim. Şimdiden teşekkürler.

cevap

18

document.write() sayfasını kullanmadan önce sayfa implicitly calls document.open() yükleyerek yeni bir sayfa oluşturur. Genellikle document.write() önlemek ve uygun DOM oluşturma tekniklerine sadık veya jQuery'nin steno oluşturma yöntemlerini kullanmalıdır: Ne kadar sayfa tarafından yüklenen HTML veya CSS dosyalarını düzenleyemezsiniz farz ediyorum

jQuery(function($) { 
    $('<style type="text/css"> .preload img { display: none; } </style>') 
     .appendTo("head"); 
    $('#body-wrap').preloadThis(); 
}); 


bu kuralı dahil et Bu durumda, ve bu sayfada daha önce uygulanan bu stilleri jQuery hazır işleyicisi dışında document.write() almak, yükleme sona isterseniz:

// write() before the document finishes loading 
document.write('<style type="text/css"> .preload img { display: none; } </style>'); 
jQuery(function($) { 
    $('#body-wrap').preloadThis(); 
}); 

Bu şu anda yürütülen <script> etiketinden hemen sonra <style> etiketi yazacak. Umarım, tüm tarayıcılar her iki şekilde de ayrıştırmasa da, bu <head> öğenizde <style> öğesinin geçersiz olduğu başka bir yerde geçersizdir.

+0

Resimlerin önbelleğe alındığı sırada (önceki sayfa yüküne yüklenmiş olanlar) .hide() .. ile aynı sorun. JQuery uygulanmadan önce bunlar görünür. Bu, resmin gizlenmeden önce görünmesine, ardından önyükleme eklentisi tarafından silinmesine neden olur. Gizlenmeden önce titreşimden kurtulmaya çalışılır. –

+0

@Matthew: Cevabımı güncelledim. Sayfa yüklemeyi tamamlamamışsa, document.write işlevini kullanmak güvenlidir, bu nedenle jQuery'nin hazır belge işleyicisinden çıkarsanız Tamam olmanız gerekir. –

3

Sen sadece jQuery ile gizleyebilirsiniz, <style> etiketi eklemek gerekmez:

jQuery(function($) { 
    $('.preload img').hide(); 
    $('#body-wrap').preloadThis(); 
}); 
sizin preloadThis() işlevi nasıl çalıştığını biliyorum, ama o görüntüleri yükler ve gelen .preload sınıfını kaldırır Tahmin etme

img kapsayıcı. Eğer gerçekten böyle çalışırsa, bu kod size yardımcı olmayacaktır - görüntüler gizli kalacaktır.

+0

Hayır .preload içindeki tüm görüntüleri bulur ve onları kaybolur. .hide() ile ilgili sorun, resimler önbelleğe alındığında yeterince hızlı tekme olmamasıdır, bu nedenle görüntüler gizlenmeden önce bir saniyeliğine görünürdür sonra soluklaşırlar. Harika görünmüyorlar. –

İlgili konular