Question

我有一个使用针规的jQuery插件。在最初加载包含插件的页面时，插件在加载背景图像之前开始动画。当速度表超出范围时，第二张图像（“破损”仪表）会加载，但在图像加载之前会再次出现延迟。（要看到这一点，请输入一个低于零或高于100的值）

我尝试使用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更新的一部分。谢谢，大家。

编辑：我说得太早了。如果没有将图像加载到缓存中，则插件无法在Google Chrome中首页加载时启动...

Answer 1

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

Window.onload只应在图像加载后触发。为了安全起见，我会在头部运行你的图像预先缓存功能。

Answer 2

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

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

然后你可以设置那里的加载函数来递减（或增加）一些计数变量，当它达到零（或它应该达到的数量）时，你就开始了。当然，count变量必须不是for循环的本地变量。我不确定它是否必须是全局的，或者它是否可能是函数的本地函数。

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

2 个答案: