2010-12-23 1 views
7

Ich bin sehr neu mit Javascript.Javascript Dokument schreiben Überschreiben Seite?

Ich versuche, einen Tag mit document.write (mit Wordpress) zu erstellen, um einen Stil hinzufügen, die Bilder versteckt, bevor sie vorgespannt sind. Ich musste einen Javascript-Stil schreiben, um die Bilder zu verstecken, bevor sie über CSS geladen werden. Ich möchte es nicht in die CSS-Datei schreiben, wenn der Benutzer Javascript deaktiviert hat und die Bilder dann nie angezeigt werden.

Ich versuche, diesen Code zu erhalten zu arbeiten:

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

Aber, es die ganze Seite nur überschrieben wird und macht es leer gehen. Wie kann ich das stoppen? Ich möchte das Tag zu dem hinzufügen, ohne die Seite zu entfernen. Mit "Return" versucht, kein Glück.

Sorry, ich bin ein Anfänger. Danke im Voraus.

Antwort

18

Mit document.write() nachdem die Seite geladen wurde implicitly calls document.open(), die eine neue Seite erstellt. Sie sollten in der Regel document.write() vermeiden und halten Sie sich an die richtige DOM kreative Techniken oder jQuery Stenografie Erstellungsmethoden verwenden:

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


Ich nehme an, Sie können die HTML oder CSS-Dateien nicht bearbeiten, die von der Seite geladen werden diese Regel einschließen? Wenn das der Fall ist, und Sie wollen, dass diese vor der Seite angewandt Stile fertig geladen, nehmen document.write() aus dem jQuery bereit Handler:

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

Dies schreibt den <style>-Tag unmittelbar nach dem aktuell ausgeführten <script> Tag. Hoffentlich ist dies in Ihrem Element als <style> ist nirgendwo anders ungültig, obwohl alle Browser es in beide Richtungen parsen sollten.

+0

gleiche Problem wie mit .Hide() .. wenn die Bilder zwischengespeichert werden (auf der vorherigen Seite Last geladen) sie sichtbar sind, bevor die jQuery angewendet wird. Dadurch wird das Bild angezeigt, bevor es ausgeblendet wird. Anschließend wird es durch das Preload-Plugin eingeblendet. Es wird versucht, das Flimmern zu entfernen, bevor es ausgeblendet wird. –

+0

@Matthew: Ich habe meine Antwort aktualisiert. Es ist sicher, 'document.write' zu ​​verwenden, wenn die Seite nicht vollständig geladen wurde. Wenn Sie sie also aus dem driver ready-Handler von jQuery entfernen, sollten Sie in Ordnung sein. –

3

Sie brauchen nicht <style> Tag hinzuzufügen, können Sie sie einfach verstecken mit jQuery:

jQuery(function($) { 
    $('.preload img').hide(); 
    $('#body-wrap').preloadThis(); 
}); 

Sie wissen nicht, wie Sie Ihre preloadThis() Funktion funktioniert, aber ich denke, es Bilder lädt und entfernt .preload Klasse aus img Behälter. Wenn es tatsächlich so funktioniert, hilft Ihnen dieser Code nicht - Bilder bleiben verborgen.

+0

Nein, es findet alle Bilder innerhalb .preload und blendet sie in. Das Problem mit .Hide() ist, dass es treten nicht genug schnell, wenn die Bilder zwischengespeichert werden, so dass die Bilder sind für einen Bruchteil einer Sekunde, bevor sie versteckt sind dann sind sie verblasst. Sieht nicht gut aus. –

Verwandte Themen