Question

我需要在将ajax数据附加到div之前预加载ajax数据，并且我有这个代码：

$.ajax({ 
   url: 'ajax.php',
   data: { modelID:id },
   type: 'post',
   success: function(result){

      $(result).load(function(){
         $('.view_'+id).html(result)
         $('.view_'+id).find('.brandModelGallery').bxSlider({})
         $('.view_'+id).addClass('loaded')
      })

   }
})

这不会返回任何东西。如果将其写为$('.view_'+id).load(result)，那么我可以在控制台中看到result的所有内容作为语法错误，因此它可以正常获取它们，但不是这样。那是为什么？

Answer 1

我在jsfiddle

上创建了一个示例

HTML：

<div id="d1"></div>
<div id="d2"></div>

JS：

$.ajax({ 
   url: './',
   data: { modelID: '1' },
   type: 'post',
   success: function(result){
     console.log(result);
     $('#d1').html(JSON.stringify(result));
     // A fake object as your result.
       var bxSlider =  $('<ul class="bxslider"><li><img src="https://i.imgur.com/KsV6jS5.png" /></li><li><img src="https://i.imgur.com/bqcK47I.png" /></li></ul>');       

       // Do thing only when all img loaded.
       var unLoadimges = bxSlider.find("img").length;
       bxSlider.find('img').load(function() {
           --unLoadimges;
           console.log("loaded, left: " + unLoadimges);
           if (unLoadimges === 0) {
               bxSlider.appendTo($("#d2")).bxSlider();
           }
       });
   }
})

将img元素追加到页面时，并不意味着它已加载。听取它的load事件。

编辑：现在让bxSlider适用于我的示例。不确定是否有更好的方法来检查是否所有图像都已加载。

jQuery load元素不适用于ajax

1 个答案: