Javascript异步加载背景图像 [英] Javascript load background-image asynchrously

问题描述

是否可以异步加载背景图像？

Is it possible to load a background-image asynchronously?

我已经看到很多 jQuery 插件以异步方式加载普通图像，但我无法确定是否可以预加载/异步加载背景图像。

Ive seen many jQuery plugins to load normal image in an asynchronous way, but I cant find if it's possible to preload / asyncronously load a background-image.

编辑

我澄清了我的问题。我一直在这个测试网站上工作 http://mentalfaps.com/
加载背景图片通过计时工作每小时刷新一组图像中的随机图像（在flickr目录上随机拍摄图像）。

I clarify my problem. I've been working on this test site http://mentalfaps.com/ The background image is loaded randomly from a set of images refreshed each hour by a chron job (wich takes random images on a flickr catalog).

此时主机是空闲且缓慢的，所以背景图片需要一些时间才能加载。

The host is free and slow at the moment, so the background image takes some time to load.

第一个叠加层（带有PNG透明mentalfaps徽标的叠加层）和宽度的位置由在 jQuery（document）.ready costruct。

The positioning of the first overlay (the one with the PNG transparent mentalfaps logo) and width are regulated by a function created in the jQuery(document).ready costruct.

如果您尝试多次刷新页面，则宽度为右叠加div为0（所以你在布局中看到一个洞）

If you try to refresh the page many times, the width of the right overlay div is 0 (and so you see a "hole" in the layout)

这是设置我的位置的方法：

Here is the method to set my positions :

function setPositions(){
    var oH = $('#overlay-header');
    var overlayHeaderOffset = oH.offset();
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width());
    if (overlayRightWidth >= 0) {
        $('#overlay-right').width(overlayRightWidth);
    } else {
        $('#overlay-right').width(0);
    }
    var lW =  $('#loader-wrapper');
    lW.offset({
        left: (overlayHeaderOffset.left + oH.width() - lW.width())
    });
}

问题是 $（窗口）。 width（）低于有效窗口宽度！因此检查失败，脚本为 $（'＃overlay-right'）。width（0）;

The problem is that the $(window).width() is lower then the effective window width! so the check fails and the script goes for $('#overlay-right').width(0);

任何想法？

推荐答案

我自己找到了答案，由于，这是一个问题。 offset（）有时给出错误值的方法。

Ive found the answer myself, it was a problem due to the .offset() method that gived sometimes the wrong values.

我使用 .position（）获得写入值：

 var overlayHeaderOffset = oH.position();

这篇关于Javascript异步加载背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！