Menu
I'm very new with javascript.
I'm trying to create a tag using document.write (with Wordpress) to add a style that hides images before they are preloaded. I've had to resort to writing a Javascript style to hide the images before they are loaded via CSS. I don't want to actually write it into the CSS file incase the user has Javascript disabled and then the images would never show.
I'm trying to get this code to work:
jQuery(function($) {
document.write('<style type="text/css"> .preload img { display: none; } </style>');
$('#body-wrap').preloadThis();
});
But, it is just overwriting the whole page and making it go blank. How can I stop this? I want to add the tag to the without removing the page. Tried using 'return', no luck.
Sorry, I'm a novice. Thanks in advance.
481
How to use document.write () in JavaScript. The document.write () function is commonly used when testing simple web applications or when learning JavaScript. document.write () will print the contents of the parameter passed to it to the current node at execution time. Here is a simple example: < script > document. write ( "Some Text") </ script >.
Yes, as you stated, that overwrites the document when called after the page is loaded. If you want to manipulate the existing DOM, you should work through some basic tutorials first. developer.mozilla.org/en-US/learn/javascript The issue is that when you run document.write after the document has loaded, it overwrites the entire document.
Start writing the html contents to the document. JavaScript engine will execute document.write () when it encounters it and then write "<p>holla</p>" into that specific line in the document, just as if the string was already part of the html file!
Since the document always needs to be opened for writing before you write, calling document.write () always results in an implicit document.open (). Interspersing document.write () calls throughout an html body is a commonly used technique used to insert string contents dynamically into an html page.
Using document.write() after the page has finished loading implicitly calls document.open(), which creates a new page. You should generally avoid document.write() and stick to proper DOM creation techniques, or use jQuery's shorthand creation methods:
jQuery(function($) {
$('<style type="text/css"> .preload img { display: none; } </style>')
.appendTo("head");
$('#body-wrap').preloadThis();
});
// write() before the document finishes loading
document.write('<style type="text/css"> .preload img { display: none; } </style>');
jQuery(function($) {
$('#body-wrap').preloadThis();
});
This will write the <style> tag immediately after the currently executing <script> tag. Hopefully, this is in your <head> element as <style> is invalid anywhere else, although all browsers should parse it OK either way.
127
You don't need to add <style> tag, you can just hide them with jQuery:
jQuery(function($) {
$('.preload img').hide();
$('#body-wrap').preloadThis();
});
Don't know how your preloadThis() function works, but I guess it loads images and removes .preload class from img container. If it indeed works like that, this code will not help you - images will stay hidden.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
