如何在网页上加载此内容后才能显示内容?

时间:2015-08-07 11:37:50

标签: javascript jquery

我是网络开发的新手,我遇到了无法解决的问题。

问题:我需要在加载该内容后显示内容。

## file.js ##
//on click this code run!
//and after click i see web site load content

var toInsert = $('<div class="togllecomposition tg'+number+'">\
                                <div class="infoclip">'+info+'</div>\
                                <iframe width="420" height="315" src="'+clip+'" frameborder="0" allowfullscreen></iframe>\
                                <div class="comments">\
                                    <div class="commentlabel">Комментарии:</div>\
                                    <div class="comment">\
                                        <div id="hypercomments_widget'+id_composition+'"></div>\
                                            ' + _hcwp.push({widget:"Stream", widget_id: ID, xid: id_composition, append:"#hypercomments_widget"+id_composition, hc_disabled: 1}) +'\
                                    </div>\
                                </div>\
                            </div>');

//this didn't work
$(toInsert).load(function() {
     $(".composition".concat(number)).after(toInsert); 
 });


// this work but with lags because content in process of loading
 $(".composition".concat(number)).after(toInsert);

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

load()事件是危险且含糊不清的,因为您正在侦听加载事件并同时加载ajax内容。请试试这个:

  var toInsert = $('video from youtube');

  $(toInsert).on("load", function() {
      $(".composition"+concat(number)).after(toInsert); 
  });

您可以以不同的方式使用延迟:

  $(toInsert).load('url-to-video', function(response, status, xhr ) {
       console.log(response, status, xhr );
  });

这是两种不同的方法。别碰两个!

修改

查看OP的编辑,我看到可能被监听的iframe,而不是DOM元素。

  toInsert.find('iframe').on("load", function() {
      $(".composition".concat(number)).after(toInsert); 
  });

这里是您的解释,因为您不必使用load()方法来监听加载事件:

http://api.jquery.com/load/

它进行了AJAX查询。