Question

嗨我需要一个与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
});

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

请帮忙。

Answer 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 );          
    }
});}

Answer 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); 
      }

});
}

在带有预加载器的div中单击页面加载

2 个答案: