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以显示其有效。

首先执行回调函数

1 个答案: