点击页面加载到带有预加载器的 div 中答案

【问题标题】：On click page loads in a div with preloader点击页面加载到带有预加载器的 div 中
【发布时间】：2014-08-12 11:32:37
【问题描述】：

您好，我需要一个可与 flexslider 配合使用的预加载器，它会在单击某个图像时从另一个页面加载。

我正在使用以下代码加载页面。

$(".work").click(function () {
    var projectUrl = $(this).attr("data-url");
    var projectLocation = $(this).offset().top;
    console.log(projectLocation);
    $.ajax({
        url: projectUrl
    }).success(function (data) {
        $(".works .preview").fadeIn("slow");
        $(".works .preview").html(data);
        $("html,body").animate({
            scrollTop: $(".works .preview").offset().top - 70
        }, 1000);
        $(".project .close").click(function () {
            $(".works .preview").fadeOut("slow");
            $("html,body").animate({
                scrollTop: projectLocation - 300
            }, 1000);
            setTimeout(function () {
                $(".works .preview").html("")
            }, 1000)
        });
        $(".project .slider").flexslider({
            animation: "slide",
            slideshow: true,
            directionNav: false,
            controlNav: true,
            animationSpeed: 600
        });
        var t = $(".project .player").attr("data-type");
        var u = $(".project .player").attr("data-url");
        if (t === "youtube") {
            var d = '<iframe width="440" height="330" src="//www.youtube.com/embed/' + u + '?rel=0" frameborder="0" allowfullscreen></iframe>';
            $(".project .player").html(d)
        } else {
            if (t === "vimeo") {} else {
                if (t === "soundcloud") {}
            }
        }
    });
    return false
});

我的问题是加载图像需要时间，因为我需要放置一个预加载器。

请帮忙。

【问题讨论】：

我认为您可能需要清理该代码，然后许多人才能或愿意提供帮助
我只想说...freepreloader.com

标签： jquery wordpress flexslider preloader

【解决方案1】：

我是这样写ajax函数的.....

使用 beforeSend 回调可能会对您有所帮助...

function functtion_name(data_id){   
$.ajax({
    url: 'ajax_query.php?do=remove_cms_photo',    
    type: "POST",
    dataType: "text",
    data: {data_id: data_id},
    beforeSend: function(){
         $('#success').html('<img src="loader.gif"/> Loading.... ');
    },
    success: function(respond){         
        $('#success').html( respond );          
    }
});}

【讨论】：

【解决方案2】：

function function_name(data_id1)
{   
  $('#success').html('<img src="loader.gif"/> Loading.... ');

  $.ajax({
    url: 'ajax_query.php?do=remove_cms_photo',    
    type: "POST",
    dataType: "text",
    data: {data_id: data_id1},
    success: function(html)
    {   
        $('#success').html(''); 
        $('#success').html( html);          
    },
       error: function(data, errorThrown)
      {
          alert('request failed :'+errorThrown);
          $('#success').html(errorThrown); 
      }

});
}

【讨论】：