How I can show content only after loading this content on a web page?

Question

I'm new to web development, and I have a problem I can't solve.

Problem: I need to show content after loading that content.

## 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);

How can I solve this problem?

possible duplicate of [How to do jquery code AFTER page loading?](http://stackoverflow.com/questions/2926227/how-to-do-jquery-code-after-page-loading) — Eric Leibenguth, Aug 07 '15 at 11:55

score 0 · Accepted Answer · edited Aug 07 '15 at 13:40

0

load() event is dangerous and ambiguous, because you are listening load event and load an ajax content simultaneously. Please, try this:

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

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

You can use a deferred in a different way:

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

These are two different ways to do it. Don't mix both!

EDIT

Viewing the edit of OP, I see an iframe that may be listened, and not the DOM element.

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

Here you are the explanation because you don't must to use load() method to listening load event:

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

It makes an AJAX query.

edited Aug 07 '15 at 13:40

squarefrog

4,750
4
35
64

answered Aug 07 '15 at 12:23

Marcos Pérez Gude

21,869
4
38
69

Thank you, but this didn't work for me, I updated the question, pls look. – kzvonov Aug 07 '15 at 12:33
What are you trying? first or second solution? Note that you have a syntax error, in javascript concatenations made with `+` and not with `.`. The dot is in PHP. – Marcos Pérez Gude Aug 07 '15 at 12:34
I'm edited my answer. This must works. – Marcos Pérez Gude Aug 07 '15 at 12:37
Check the edition and be carefull with concatenations symbol (`+`) – Marcos Pérez Gude Aug 07 '15 at 12:38
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/concat **concat it is a method of string**. – kzvonov Aug 07 '15 at 12:42
Ok, it's true, I am not noticed that. It's an strange way to make it but if you see that is working, good! You need to try the onload method that I tell you. It works for me and for tons of people. Notice me if is something wrong. – Marcos Pérez Gude Aug 07 '15 at 12:48

How I can show content only after loading this content on a web page?

1 Answers1

EDIT