我想在body标记上设置一个背景图像,然后运行一些代码-如下所示:

$('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});

如何确保背景图像已完全加载?

推荐答案

试试这个:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

this will create a new image in memory and use load event to detect when the src is loaded.

EDIT: in Vanilla JavaScript it can look like this:

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

it can be abstracted into handy function that return a promise:

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

Jquery相关问答推荐

jQuery在localStorage时将类添加到正文

如何推迟内联 Javascript?

内容安全策略:页面的设置阻止了资源的加载

如何将文本从 div 复制到剪贴板

如何使用 JqGrid 更改 select2 下拉列表的选定值?

如何滚动到AngularJS中的页面顶部?

Jquery Ajax,从 mvc.net 控制器返回成功/错误

由于 MIME 类型错误,Chrome 拒绝执行 AJAX 脚本

如何以编程方式触发 ngClick

X-Requested-With 标头有什么意义?

Chrome 中的 AJAX 发送选项而不是 GET/POST/PUT/DELETE?

如何判断 bootstrap 模式是否打开,以便我可以使用 jquery 验证?

jquery更改div类的样式属性

如何使用jQuery触发类更改事件?

jQuery - 使用发布数据重定向

使用 JQuery 定义要追加的 HTML 模板

了解 Backbone.js REST 调用

错误“找不到 jquery-2.0.2.min.map”

如何使用jQuery在弹出窗口中预览输入类型=“文件”中的选定图像?

复选框值始终为“打开”