如何防止圖像損壞圖標之前顯示Ajax成功？

Question

成功之前顯示圖像破碎的圖標。怎樣預防，或有更好的解決辦法 - 這裏是我的代碼

var menuName = ['about.jpg', 'concerns.jpg', 'contact.jpg', 'gallery.jpg']; 
        $.ajax({ 
         url: htmlContetPage[menuItem], 
         success: function (data) { 
          $('.content_area').html(data); 
          $("img").error(function(){ 
           $(this).hide(); 
          }); 
          $('.wheelSelect').html('<img style="width:100%;overflow:hidden;" src="images/' + menuName[menuItem] + '" />'); 
         }, 
         dataType: 'html' 
        }) 

Answer 1

預緊力的圖像，然後將其添加到HTML。

var menuName = ['about.jpg', 'concerns.jpg', 'contact.jpg', 'gallery.jpg']; 
$.ajax({ 
    url: htmlContetPage[menuItem], 
    success: function (data) { 
     $('.content_area').html(data); 
     $("img").error(function(){ 
      $(this).hide(); 
     }); 
     var image = new Image(); 

     image.onload = function() { 
      $('.wheelSelect').html('<img style="width:100%;overflow:hidden;" src="images/' + menuName[menuItem] + '" />'); 
     }; 

     image.src = 'images/' + menuName[menuItem]; 
    }, 
    dataType: 'html' 
})