Triggering a function after an element has been fully loaded onto the page

Question

Wondering if anyone can help because no one out there has given a solution this problem!

How do you wait for a dynamically loaded element (e.g. a specific div of another .html page) to first be fully loaded so that you can then, and only then, trigger a function?

.load obviously won't work as pointed out by the OP of this post.

Any ideas?

Many thanks!

Update: Some more info: I am using .load to load a div element from another page which contains data for use by Galleria (executed using .load's callback). I am currently using setTimeout to ensure the div is loaded so that Galleria doesn't load too quickly and empty. But I don't like this setTimeout business, it's too much of a patchwork solution.

Divs to be loaded:

<div id="source1" class="container">
 <div class="thumbnails"><a href="images/gallery/recent/7.jpg"><img src="images/navigation/recent/7.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/6.jpg"><img src="images/navigation/recent/6.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/5.jpg"><img src="images/navigation/recent/5.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/4.jpg"><img src="images/navigation/recent/4.jpg"/></a></div>
</div>
<div id="source2" class="container">
 <div class="thumbnails"><a href="images/gallery/recent/3.jpg"><img src="images/navigation/recent/3.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/2.jpg"><img src="images/navigation/recent/2.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/1.jpg"><img src="images/navigation/recent/1.jpg"/></a></div>
</div>

Part of the Script:

$(document).on("click", "#menu", function(event) {
event.preventDefault();
var link = this.hash;
var ref = this.hash.replace("#", "") + ".html " + link;
var deferred2 = $.Deferred();
goLoad();
function goLoad(){
  switch(link){
    case "#recent":
     $("#recent").css("height", window.innerHeight);
     $("#recent").load(ref + " > *", null, goRecent());
    break;
  /*..other cases...*/
  }
};
function goRecent(){
  setTimeout(function(){
    deferred2.resolve();
    deferred2.done(doGallerySize, doGallery, goScroll)
    function doGallerySize(){
      $("#gallery").css("height", window.innerHeight);    
    }
    function doGallery(){
      Galleria.run("#galleria",{
        dataSource:"#source1, #source2",
        keepSource:true,
        responsive:true,
        thumbnails:false
      });
    }
    function goScroll(){
      $.smoothScroll({
          scrollTarget: link,
          afterScroll: function() {
            $(".stickynav").sticky({topSpacing:0});}
      });
    }
  }, 100);
}
});

generally you use callbacks of the methods that insert the elements. Provide some code that does the dynamic element insertions. If all you need is event binding, there are event delegation methods that can be used. Overall this question is far too vague — charlietfl, Oct 18 '14 at 15:26
I think the simplest way would be to run your Javascript at the end of the .html page being loaded. I'm not sure exactly how you are loading your file, or I could help more. — EvilZebra, Oct 18 '14 at 15:27
How is the other div being loaded? If you show us the code that causes the div to be loaded, we can show you how to execute something after it finishes loading. — Pat, Oct 18 '14 at 15:37
Does this answer your question? [How to check if DOM element is fully loaded?](https://stackoverflow.com/questions/28916748/how-to-check-if-dom-element-is-fully-loaded) — LuckyLuke Skywalker, Apr 22 '22 at 09:46

score 0 · Answer 1 · answered Oct 18 '14 at 15:24

0

Is .ready() what you are looking for?

http://api.jquery.com/ready/

answered Oct 18 '14 at 15:24

msimmons

146
1
3
15

this isn't an answer it is a comment and should be placed in comment block and answer deleted – charlietfl Oct 18 '14 at 15:25
1

@charlietfl I don't have enough rep to comment. For future reference, until I do have enough rep, how would I pose my suggestion to the OP? – msimmons Oct 18 '14 at 17:08

score 0 · Answer 2 · answered Jan 20 '17 at 07:45

I found this works for me, my script code is more short and simple, I append it to the body element, and have the special character escaped.

$('body').append('<script>var targetObj = $("#elementId"); var initialText = targetObj.text(); targetObj.text(initialText.replace(\/\\\|\.(\\w|\\W)+\/g, ""));<\/script>')

the code will be added at the bottom of the body, so you could ensure to access the dynamic loaded element in the dom.

Triggering a function after an element has been fully loaded onto the page

2 Answers2