Javascript document write overwriting page?

前端未结

关注

 2  2081

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 h

相关标签:

2条回答

轮回少年

2020-11-29 13:40
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();
});
```
I'm assuming you can't edit the HTML or CSS files that are loaded by the page to include this rule? If that's the case, and you want these styles applied before the page finishes loading, take document.write() out of the jQuery ready handler:
```
// 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
悲&欢浪女

2020-11-29 13:47
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...