Question

我对javascript很新。

我正在尝试使用document.write（使用Wordpress）创建标记，以添加在预加载之前隐藏图像的样式。我不得不求助于编写Javascript样式来隐藏图像，然后再通过CSS加载它们。我不想将其实际写入CSS文件，因为用户已禁用Javascript，然后图像将永远不显示。

我正在尝试使用此代码：

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

但是，它只是覆盖整个页面并使其变为空白。我怎么能阻止这个？我想在不删除页面的情况下添加标签。尝试使用'返回'，没有运气。

抱歉，我是新手。提前谢谢。

Answer 1

在页面加载implicitly calls document.open()后使用document.write()，这会创建一个新页面。您通常应该避免document.write()并坚持使用正确的DOM创建技术，或者使用jQuery的速记创建方法：

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

<小时/> 我假设您无法编辑页面加载的HTML或CSS文件以包含此规则？如果是这种情况，并且您希望在页面加载完成之前应用这些样式，请从jQuery就绪处理程序中取出document.write()：

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

这将在当前正在执行的<style>标记之后立即写入<script>标记。希望这是在<head>元素中，因为<style>在其他任何地方都无效，尽管所有浏览器都应该以任何方式解析它。

Answer 2

您不需要添加<style>标记，您可以使用jQuery隐藏它们：

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

不知道你的preloadThis()函数是如何工作的，但我想它会加载图像并从.preload容器中删除img类。如果确实如此，那么这段代码对你没有用处 - 图像会隐藏起来。

Javascript文档写覆盖页面？

2 个答案: