预加载jQuery插件的CSS背景图像

我有一个jQuery插件，使用针规。在最初加载包含插件的页面后，插件在加载背景图像之前开始其动画。当速度计超出范围时，会加载另一个图像（“破损”的计量表），但在图像加载之前又会有一个延迟。（看到这一点，输入小于零或高于100的值）预加载jQuery插件的CSS背景图像

http://jacob-king.com/demo/speedometer

我尝试使用this solution，解决了“断”图像预加载的问题：

http://jacob-king.com/public/notSoPublic/jquery.speedometer-1.0.3/example.html

(function(){ 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]=_speedometerDirectory+"/background.jpg"; 
    images[1]=_speedometerDirectory+"/background-broken.jpg"; 

    // start preloading 
    for(i=0; i<=1; i++) 
    { 
      imageObj.src=images[i]; 
    } 

})();

但是我怎么强制插件在启动动画之前等待两个背景图片加载？

解决方案

由于图像加载的jQuery插件的一部分，将它们放在$ .fn外呼似乎是不恰当;除非速度计功能被调用，否则图像不应加载。

我结束了crimson_penguin的解决方案稍加修改的版本会：

var img0 = new Image(); 
img0.src = _speedometerDirectory+"/background.jpg"; 
var img1 = new Image(); 
img1.src = _speedometerDirectory+"/background-broken.jpg"; 

$(img0).load(function() { 
    $(img1).load(function() { 
     // Everything's ready. Now we begin. 
    }); 
});

这可能看起来有点缺憾。随意建议一个更优雅的语法（它很晚，我很累，这是有效的，所以“足够好”）。结果可以看到here，我将把它作为我的1.0.4更新的一部分。感谢大家。

编辑：我说得太快了。如果没有加载到高速缓存中的图像，该插件无法启动的谷歌浏览器的第一个页面加载...图像已加载完成后

来源

2011-01-31 Jake

尝试运行`onload`函数而不是`dom ready` – Raynos 2011-01-31 00:49:17

您只使用一个对象来加载两个图像;我不确定这会起作用。我反而做这样的事情：

for(i=0; i<=1; i++) 
{ 
    var img = new Image(); 
    img.src = images[i]; 
    images[i] = img; 
    $(images[i]).load(function() { ... }); 
}

然后，您可以设置负载功能有递减（或增加）的一些计数变量，当它到达零（或者它应该数量达到），你开始。当然，count变量对于循环来说不必是局部的。我不确定它是否必须是全球性的，或者它是否可能是本地的功能。

来源

2011-01-31 00:58:18

window.onload = function() { 
    // start my plugin 
};

的window.onload应该只触发。为了安全起见，我会在头部运行图像预存功能。

来源

2011-01-31 00:54:01 Raynos

预加载jQuery插件的CSS背景图像

回答

相关问题