Question

我有一个页面，我使用jquery .get()方法加载内容，.html()在我的页面上显示它们。在加载过程中，我有一个div框，在我的页面上方有一个预加载器，用于隐藏弹出的新元素，而是显示一个gif。有些页面需要很长时间才能加载，因为其中包含iframe，图片等。现在我只希望在所有内容完全加载后删除预加载器div，这是我找不到答案的地方，因为没有.html()回调函数。我已尝试将.load()，.on()作为事件加载，.done()方法上的.get()函数，但似乎没有任何效果，因为我希望拥有它。< / p>

有没有机会发现，当我的ajax div的内容已经完成加载时，我可以删除预加载器吗？

修改
这是我的HTML标记

<div class="wrapper">
<div class="ajax_cont">
<!-- The content will come in here -->
</div>
<div class="preloader"></div>
</div>

也许我没有清楚地解释这个问题，所以这里也是我的js代码：

function load_ajax(linktofile) {
    $(".preloader").fadeIn(200);

    setTimeout(function() { 
        $.get("ajax/" + linktofile, function(data){}).done(function(data) {

            var content = $(data).filter('#loaded_content').html();

            $(".ajax_cont").html(content); //It takes a while until all pictures, which were included in content, are fully loaded in .ajax_contnt          

            setTimeout(function() { 
                $(".preloader").fadeOut(200); //I want this to be executed only when everything is fully ready
            }, 150);

        });
    }, 200);    
}

我添加了一些评论来澄清，究竟是什么意思。

Answer 1

试试这个

jQuery(document).ready(function($){
  // assuming .loader is a button/link to load content
  // and .preloader is the window (overlay) that will show while content is being loaded
  $('.loader').click(function(){

    // fadein
    $('.preloader').fadeIn(200);

    // load content
    $('.ajax_cont').load("ajax/" + linktofile,function(){

       // use jquery's **:last** to wait for the last image to load then fadeout
       $('.ajax_cont img:last').on('load',function(){
          $('.preloader').fadeOut(200);
       });

    });  // ajax_cont load
  });  // loader click
});  // document ready

等到.html（）加载的内容准备就绪

1 个答案: