Question

您好我正在尝试创建一个jQuery灯箱，在这样做时我试图用jQuery创建一个图像并将其附加到dom我有一个错误，显示在firebug中：无法加载给定URL。

我已经检查了双重检查并且三重检查了图像的url是corect，而且我使用phpstorm作为我的IDE，如果路径剂量存在，它高亮我的代码。这是我的jQuery代码：

$('<div></div>').addClass('bg-lightbox')
                   .fadeIn(1000, function(){
                        var width = $(window).width() / 2 - ($('div.lightbox').width() / 2);
                        var height = $(window).height()/2 - ($('div.lightbox').height() / 2);
           console.log(width);

                        $('<div></div>').addClass('lightbox')
                                        .css({
                                            'left':width,
                                            'top':height

                                        })
                                        .animate({
                                            'width':'+=600px',
                                            'height':'+=400px',
                                            'left':'-=300px',
                                            'top':'-=200px'
                                         }, 'slow' , 'easeInQuad')
                                        .appendTo('body');
                        $('<div></div>').addClass('exit')
                                        .appendTo('div.lightbox');
                        console.log('Image Start');
                        $('<img src="../img/X.png" alt="Close">').addClass('x')
                                                                          .fadeIn(1000,function(){
                                                                            console.log('Its done');
                                                                          })
                                                                          .appendTo('div.exit');
                    })
                   .appendTo('body');
});

这就是定制它的CSS：

    div.bg-lightbox{
    width:100%;
    height:100%;
    opacity: 0.7;
    background-color: black;
    position: absolute;
    top:0;
    left:0;
    z-index: 300;
}
div.lightbox{
    width: 5%;
    height: 5%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 400;
    border-radius: 5px;
    background-color: #DFE2E8;
    border:3px solid #677EA1;
}

    div.exit{
        width:5%;
        height: 6%;
        position: absolute;
        top:-15px;
        right:-15px;
        z-index: 500;
        border-radius: 5px;
        background-color: #DFE2E8;
        border:3px solid #677EA1;

    }
        img.x{
            position: absolute;
            top:0;
            left:0;
            z-index: 600;
        }

这可能是一个初学者的错误。提前谢谢！

编辑：此外，似乎灯箱中的灯箱加载速度非常慢，只有火箭才有人知道为什么会这样做？

Answer 1

有多个名为“exit”的div或者只是你动态创建的一个div ...我不建议这种方式随意使用类选择器..为什么不把它作为id并测试它...或者你甚至可以使用.appendTo(div.exit:first)来指定元素..如果你有多个具有类名退出的div，这可能是你的问题

Answer 2

如果您提供网址的完整路径，则会在my fiddle中加载图片。此外，如果您在“div.exit”中为顶部和右侧样式赋予负值，则不会看到图像。

jQuery无法加载给定的URL

2 个答案: