元素完全加载到页面后触发函数

想知道是否有人可以提供帮助，因为没有人提供解决方案这个问题！元素完全加载到页面后触发函数

如何等待一个动态加载的元素（例如另一个.html页面的特定div）首先被完全加载，这样才可以触发一个函数？

.load显然不会按这个 post.

任何想法的OP指出了工作？

非常感谢！

更新：一些更多的信息：我使用.load从包含由广场使用的数据的另一个页面加载div元素（使用.load的回调执行）。我目前使用setTimeout来确保div已加载，因此Galleria不会加载得太快而空。但我不喜欢这种业务，它太多拼凑解决方案。

的div被加载：

<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>

的脚本的一部分：

$(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); 
} 
});

来源

2014-10-18 tyberius7

通常您使用插入元素的方法的回调函数。提供一些执行动态元素插入的代码。如果您只需要事件绑定，则可以使用事件委托方法。总的来说，这个问题太模糊了 – charlietfl 2014-10-18 15:26:19

我认为最简单的方法是在加载的.html页面的末尾运行Javascript。我不确定你是如何加载你的文件，或者我可以帮助更多。 – EvilZebra 2014-10-18 15:27:18

其他div如何加载？如果您向我们展示导致div加载的代码，我们可以向您展示如何在加载完成后执行某些操作。 – Pat 2014-10-18 15:37:27

是。就绪（）你在找什么呢？

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

来源

2014-10-18 15:24:06 msimmons

这不是一个答案，它是一个评论，应放置在评论块和答案删除 – charlietfl 2014-10-18 15:25:44

@charlietfl我没有足够的代表评论。为了将来的参考，直到我有足够的代表，我将如何向OP提出我的建议？ – msimmons 2014-10-18 17:08:14

我发现这对我的作品，我的脚本代码更简短，我将其追加到body元素，并有特殊字符转义。

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

代码将被添加到主体的底部，因此您可以确保访问dom中动态加载的元素。

来源

2017-01-20 07:45:41 inoutwhy

元素完全加载到页面后触发函数

回答

相关问题