0

我正在尝试使用 AJAX 从服务器带来一些内容，我不知道加载可能需要多长时间，因为有时它可能很重。所以我创建了一个每次调用 AJAX 函数时都会出现的加载 gif，但是我想在加载 AJAX 响应并在内容分区中淡出时将其淡出。

HTML

<div id="loading"><img src="loading.gif" /></div>
<div id="content"></div>

这就是我正在尝试的：

$(elm).click(function(){
  $('#loading').show();
  $('#content').fadeOut();
  $.ajax({
      url:'posts.php'
      data:{id:id_post},
      method:"POST",
      success:function(response){
        $('#content').load(response, function(){
          $('#content').html(response);
          $('#content').fadeIn();
          $('#loading').hide();
        });
      }
  });
});

我知道这是错误的，因为在 中.load(param1, function(data){})，param1 应该是要加载的参考文件，而不是带有字符串的变量，它似乎可以工作，但console.log(data)返回一个未找到的错误，所以我确信这不是这样做的方法。

简而言之：当且仅当 AJAX 响应的每个字节都被加载时，我想 fadeIn() 我的 div 和 fadeOut() 我的加载，而不是如果代码准备好，而是加载，例如<img>标签内的大图像。

有任何想法吗？谢谢

4

4 回答 4

2

如果您的 AJAX 响应是包含<img>您放置在页面上的标记的 HTML 块，并且您想检测此图像何时已加载，您应该做一些额外的事情。

您应该将图像中的响应划分为预加载，以及使用图像的原始 html。您可以使用这样的 JSON 响应：

{
 "image": "url_to_big_image.jpg", 
 "html": "<img src=\"url_to_big_image.jpg\">"
}

您最喜欢的后端语言可能有一种将您的对象/数组转换为 JSON 的方法。

然后当你的 AJAX 请求完成后，你可以这样做：

var img = $('<img/>')
img[0].src = response.image // this pre-loads the image

img.load(function() {
    // now the image has been pre-loaded
    $('#content').html(response.html)
    $('#content').fadeIn()
    $('#loading').hide()
})

多个图像

要对多个图像执行此操作，您可以将图像放在 JSON 中的数组中：

{
 "images": ["url_to_big_image.jpg", "second_image.jpg"], 
 "html": "<img src=\"url_to_big_image.jpg\"> <img src=\"second_image.jpg\">"
}

然后在 javascript 中循环遍历它们，并保持已加载的数量。如果所有图像都已加载，您可以显示内容：

var show_content = function() {

    // only show content if all images are loaded
    if(images_loaded == response.images.length) {
        $('#content').html(response.html)
        $('#content').fadeIn()
        $('#loading').hide()
    }

}

var images_loaded = 0

for(var img_url in response.images) {

    var img = $('<img/>')
    img[0].src = img_url // preload image

    img.load(function() { // when image is pre-loaded
        images_loaded++ // increase images_loaded
        show_content() // show content if all images are loaded
    })

}

我尚未测试此代码，因此您可能需要更改某些内容才能使其正常工作，但这与想法有关。

于 2013-06-05T14:19:52.313 回答
1

基于API你可以做

$(elm).click(function(){
  $('#loading').show();
  $('#content').fadeOut();
  $('#content').load('posts.php',
          {id:id_post},
          function(response, status, xhr){
              $('#content').fadeIn();
              $('#loading').hide();
          }
   );
});

$.load#content已经设置了响应的html 。

于 2013-06-05T12:50:28.647 回答
0

你可以试试这个{未测试}：

success: function (response) {
     var $tmp = $($.trim(response)),
         $l_elems = $tmp.find('img, script'),  //find will not work if elements not nested inside a container. In this case use a fake div as container and nesting elements inside it
         tot = $l_elems.length,
         i = 0;
     $l_elems.one('load', function () { //here using one, not on
         i++;
         if (i === tot) {
             $('#loading').hide();
             $('#content').append($l_elems).fadeIn();
         }
     }).each(function () {
         if (this.complete) $(this).load();
     });
 }
于 2013-06-05T12:54:00.140 回答
0

jQueryload函数从服务器加载数据并将 url 作为第一个参数。请参阅文档。

所以我认为你应该这样做：

success:function(response){
    $('#content').html(response)
    $('#content').fadeIn();
    $('#loading').hide();
}
于 2013-06-05T12:50:43.240 回答