Question

(function($){
    'use strict';
    document.getElementByClass('Class').innerHTML = 'text'
})()

我需要在页面为白色时执行此代码（在加载元素之前页面必须为白色）我需要用于检查Classes文本是否已更改然后删除的代码使整个页面变白的代码。

Answer 1

请注意，.getElementByClass()不是DOM方法。由于使用了jQuery

$(".Class").html("text")

或

$(".Class").text("text")

可以代替。

要使用.getElementsByClassName()并返回HTMLCollection，

如果预计会影响多个元素，则可以迭代集合

for (let i = 0, el = document.getElementsByClassName("class"); i < el.length; i++) {
  el[i].textContent = "text"
}

JavaScript解决方案

选择所有元素，将opacity设置为0

$.holdReady(true);
$("*").css("opacity", 0);
// do stuff
$.holdReady(false);
$(function() {
  $("*").css("opacity", 1);
  // do stuff
})

理想情况下，可以在CSS上设置opacity，以避免在执行JavaScript之前显示document的闪烁或闪烁

* {opacity: 0}

使用$.holdReady(true)在执行jQuery()的同时执行评估，一旦评估完成，请执行jQuery.holdReady(false)并将opacity设置为1。

Answer 2

添加一个loading类，在呈现页面/重新加载内容时隐藏您的元素，然后在完成后将其删除。

下面是一个将visibility与transition一起使用的示例-您同样可以使用.loading { display:none; }将文本+背景设置为白色以符合原始要求。

// Simulate loading
setTimeout(function() {
  $("#d1").text("loaded");
  $(".loading").removeClass("loading");
}, 1000);

div.loading {
  visibility: hidden;
  opacity: 0;
}

div {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s, opacity 0.5s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d1" class='loading'>hidden during load</div>

如何使网页变白，直到我的字符串被更改

2 个答案: