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中实现所需的行为。而是创建一个隐藏图像的函数，然后加载新图像。然后在回调中，再次使其可见

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

3 个答案: