Question

我有一个网页，可以从.txt文件中读取内容，并在表格中显示数据。

当.txt文件为空时，我想修改某些元素的CSS属性，例如网页背景的颜色。

以下jQuery代码触发了这些修改：

import React from 'react';
import myArticles from './../../data/articles.json';
import myCategories from './../../data/categories.json';

export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { 
      id:'', 
      name:'', 
      numTab: 0,
      options: [],
      changeTab: false
    }

    this.changeTab = this.changeTab.bind(this);
  }

  changeTab() {
    console.log('tab is changed');

  }

  componentDidMount() {
    console.log('In Mount');
    let tabs = Object.keys(myCategories);
    let articleList = Object.values(myCategories);
    let articleTitles = [];
    let articleDescriptions = []; 

    var articlesArray = Object.values(myArticles);

    this.setState({
        options: tabs,
        changeTab: true
    });
  }

  getArticlePage(activeTabIndex) {

    let count = 0;
    return this.state.options.map(article => {
        count = count + 1;
        return (
            <div>
                <p className="option__text">Nivea</p>
                <p className="option__text">Blue Lotion</p>
                <br/>
            </div>
    )});
  }

  getTabElements() {

    //this.setState({
    //  changeTab: true
    //});

    return this.state.options.map(category => {
        return (
        <li role="presentation" class="active">
            <a href={category}>
                {category}
            </a>
        </li>
    )});
  }

  render() {
    const tabs = [], tabsContent = [];

    let tabIndex = 0;

    return( 

      <div>
        <ul className="nav nav-tabs" role="tablist">
            {this.getTabElements()}       
        </ul>
        <div className="tab-content">
            {this.getArticlePage(tabIndex)}
        </div>
      </div>
      );
    }
  }

除了一个问题，此代码完美无缺。我不喜欢在每次加载页面时，预先修改的（即原始的）CSS属性在它们消失之前会短暂出现。

这个问题在我尝试过的每个桌面浏览器中都有体现。出于某种原因，在iOS上永远不会发生此问题。

例如：网页的原始背景颜色为灰色;上面的代码将其更改为黑色。网页最初加载灰色背景，然后切换＆＃34;切换＆＃34;到黑色背景。

这一切都是在用户眼前完成的。我希望看不到这些过渡;我希望网页能够从一开始就显示最终的CSS属性。

我怎么能做到这一点？

Answer 1

$（window）.load事件在加载整个内容后触发，如页面包含图像，css等。使用$（document）.ready而不是windows.load。如果您再次遇到问题，请尝试使用设置超时功能（将所有代码放入其中）并将时间设置为0。

通过jQuery更改CSS属性显示了简短的视觉过渡

1 个答案: