jQuery显示jquery生成的css加载完成时的项目

Question

有没有办法隐藏对象，直到我的脚本完成加载？使用ajaxcomplete（）或ajaxSuccess（）不起作用。在示例脚本下面。

有一个图像的id：imagefocus，每当我通过ajax更改图像时，您会看到原始图像大小的一秒。

$("#imageFocus").bind("load", function(){ 
    var width = $(this).width(); 
    var height = $(this).height(); 

    if(height > 443) { 
     var scaleRatio = height/443, 
      width  = Math.round(width/scaleRatio), 
      mLeft  = Math.round((590 - width)/2); 
     $(this).css({ 
      height:  "443px", 
      width:  width+"px" 
     }); 
     $(this).parent().css({ 
       marginTop: "0px", 
       marginLeft: mLeft+"px" 
     }); 
    } 
} 

Answer 1

隐藏通过CSS的图像，然后显示它在它的load事件。另外，在你让Ajax调用隐藏图像之前，下面的代码会在图像加载完成后显示它。

的CSS

#imageFocus{ 
    display:none; 
} 

JS

$("#imageFocus").bind("load", function(){ 
    var $this = $(this); 
    var width = $this.width(); 
    var height = $this.height(); 

    if(height > 443) { 
     var scaleRatio = height/443, 
      width  = Math.round(width/scaleRatio), 
      mLeft  = Math.round((590 - width)/2); 

     $this 
     .css({ 
      height:  "443px", 
      width:  width+"px" 
     }) 
     .show() //<---------Show the image 
     .parent() 
     .css({ 
       marginTop: "0px", 
       marginLeft: mLeft+"px" 
     }); 
    } 
} 

Answer 2

是，先从：

$("#imageFocus").hide() 

和结束（在你的负载功能）

$("#imageFocus").show() 

Answer 3

这是因为负载装饰和自动插入你的形象。你不能在actualcallback中实现你想要的行为。相反，创建一个隐藏图像的功能，然后加载新图像。然后在回调中，使其再次可见