首先执行回调函数

Question

我做了以下代码：

function popup(content,callback){
// create the overlay
var $overlay = $('<div />').appendTo('body');
    $overlay.attr('class','overlay');
// create a popup
var $popup = $('<div />').appendTo('body');
    $popup.attr('class','popup');
// add the image
if(typeof content.imageUrl !== 'undefined'){
    var $popup_image = $('<img />').appendTo($popup);
        $popup_image.attr('src',content.imageUrl);
        $popup_image.attr('class','popup_img');
};
// create a popup title
var $popup_title = $('<h1 />').appendTo($popup);
    $popup_title.attr('class','popup_h1');
    $popup_title.html(content.title);
// create a popup body
var $popup_body = $('<p />').appendTo($popup);
    $popup_body.attr('class','popup_p');
    $popup_body.html(content.text);
// create a popup close
var $popup_close = $('<span />').appendTo($popup);
    $popup_close.attr('class','close');
    $popup_close.html('x');
// create the fadeIn/fadeOut speed
if(typeof content.speed !== undefined){
    var popup_fadespeed = content.speed;
} else {
    var popup_fadespeed = 'slow';
};
    // bind the close function to $popup_close
    $popup_close.bind('click',function(){
        $popup.fadeOut(popup_fadespeed);
        $overlay.fadeOut(popup_fadespeed);
    });
    // bind the close function to $overlay
    $overlay.bind('click',function(){
        $popup.fadeOut(popup_fadespeed);
        $overlay.fadeOut(popup_fadespeed);
    });
    // show the overlay
    $overlay.fadeIn(popup_fadespeed);
    // show the popup
    $popup.fadeIn(popup_fadespeed);

    if(callback && typeof(callback) === "function"){
        return callback();
    } else {
        return;
    }}

它在我的窗口中创建了一个弹出窗口，所有东西都可以找到，例如回调。

当我做这样的事情：

$("#test").click(
function(){popup(
{
    title : 'title',
    text : 'text',
    imageUrl : 'http://localhost/frontend/media/images/logo.png',
    speed : 'slow'
},
function(){$('body').css('background','red');}
)});

现在，主体背景会在弹出窗口显示之前更改。 当我用警报对其进行测试时，该警报还会在弹出窗口之前显示（因此看起来像是先执行了回调函数）。

有人可以帮我这个忙吗？ 还是找到我在代码中犯的错误？

提前致谢

Answer 1

将最后一个更改为此：

if(callback && typeof(callback) === "function"){
   $popup_image.load(callback);
    } else {
        return;
    }}

.load是dom元素img的onload的包装，如果您在其中添加一些功能，它将在图像加载后执行。 jquey.load

添加jsfiddle以显示其工作原理。