Javascript Dokument schreiben Überschreiben Seite?

Question

Ich bin sehr neu mit Javascript.

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.

Answer 1

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.

Answer 2

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.