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

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 调用隐藏图像之前，下面的代码将在图像加载后显示它。

CSSJS

#imageFocus{
    display:none;
}

​

$("#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

发生这种情况是因为加载完成并自动插入您的图像。您无法在实际回调中实现您想要的行为。相反，创建一个函数来隐藏图像，然后加载新图像。然后在回调中，使其再次可见