Question

我想在加载整个页面后才加载DIV“图像”。

我需要什么JS代码？

<div class="row">
  <div class="image">
    CONTENT
  </div>
</div>

我将用以下函数调用该函数：

$(document).ready(function()

Answer 1

$(window).load(function() {
  $('.image').fadeIn();
});

<div class="row">
  
    <!-- This will appear after image has been loaded -->
    <div class="image" style="display: none">
        CONTENT
    </div>
  
</div>

<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

只需将请求调用放在$(document).ready(function(){ //after the entire page is loaded. // load the DIV "image" $.get('url', function(data) { $('.image').html(data); }); });函数中：

var React = require('react');
var GroupStore = require('../stores/group');
var ApiUtil = require('../util/apiUtil');
var Link = require('react-router').Link;

var SearchGroups = React.createClass({
  getInitialState: function(){
    return { searchString: "", groups: GroupStore.all() };
  },
  componentDidMount: function () {
    this.groupListener = GroupStore.addListener(this._onChange);
    ApiUtil.fetchGroups();
  },
  _onChange: function () {
    this.setState({groups: GroupStore.all()});
  },
  componentWillUnmount: function () {
    this.groupListener.remove();
  },
  handleChange: function(e) {
    this.setState({ searchString: e.currentTarget.value });
    this.filteredGroups = this.filterGroups();
  },
  filterGroups: function(){
    var regex = new RegExp(this.state.searchString);
    return this.state.groups.filter(function(group){
      return (group.title.search(regex) > -1);
    });
  },
  render: function(){
    var path = "";
    if (this.filteredGroups !== undefined){
      var groupList = this.filteredGroups.map(function (group) {
        return (<li key={group.id} className='group-search-result'>
        <Link to={'/groups/' + group.id}>{group.title}</Link></li>);
      }.bind(this));
    }
    return(
      <div className="input-group">
        <input type="text"
               className="form-control group-search"
               placeholder="Search groups..."
               onChange={this.handleChange}
               value={this.state.searchString}>
             </input>
             <ul className="group-search-list">
               {groupList}
             </ul>
      </div>
    );
  }
});

module.exports = SearchGroups;

希望这有帮助。

加载整个页面后加载DIV的Javascript函数

2 个答案: