javascript：等待代码中使用的图像加载

我有一个问题，我无法修复在javascript中创建图像轮播。我使用的jCarousel有几个“哈克”的修改，以允许具有不同宽度（纵向/横向）最终的结果是我使用一些代码，看起来像这样javascript：等待代码中使用的图像加载

function mycarousel_itemAddCallback(carousel, first, last, dir) 
{ 
    var thumbdir = 'gallery/' + dir + '/thumbs/' //set the thumbs dir 
    var fulldir = 'gallery/' + dir + '/full/' //set the full images dir 
    for (i = 0; i < 21; i++) { 
     var no = i+1; //number image we are on 
     var img = new Image(); //make a new image 
     img.src = thumbdir + no + '.jpg'; //set its source 
     var fullimg = fulldir + no + '.jpg'; //set full omages source as well 
     var html = mycarousel_getItemHTML(img.src, fullimg, img.width); //make some html for the image, with width 
     carousel.add(i+1, html, img.width); //add the image to the carousel, with width passed in 
     tagID = 'jcarousel-item-' + no; //get the css tag of the image just added 
     changeStyle(tagID, img.width); // force its height in inline css to prevent bugs 
    }

现在基本图像，这个问题似乎是因为图像尚未加载，“img.width”最终为0。这意味着图库中的所有图像的宽度都为0，因此不可见。刷新页面（因此所有的图像都在缓存中），一切正常，“img.width”是正确的值。

设置图像加载警报后强制暂停允许img.width成为正确的值，但显然这是一个可怕的解决方法。任何人都可以提供一种允许JavaScript加载图像，并获得其大小正确的方式，然后继续脚本？

预先感谢所有帮助

来源

2010-08-11 Michael Lawson

你需要使用闭包变量传递到功能：

function foo(x,y) 
{ 
    //do stuff 
} 


for(var i = 0 ; i < 9 ; i++) 
{  
    var img = new Image(); 
    img.onload = (function(a,b){ return function(){ foo(a,b) }; })(i,someVar); 
    img.src = "bar.jpg"; 
}

的嵌套函数工作如下所示：外部函数在圆括号中，因为我们声明然后一次调用它，所以（i，someVar）作为（a，b）传入函数。这个函数又将一个指针返回给一个不接受任何参数的新的第二个函数。 Wihtin第二个函数是一行代码，它调用foo，并且（a，b）在调用时被设置为i和someVar的当前值。当foo最终实际被调用（通过onload）时，它的x和y参数就是我和someVar。

实际上没有人理解任何的这一点，我们只是假装我们做:-)

您可以包装奇特的嵌套函数在其他辅助功能，使之少一点古怪。请参阅http://cyclomedia.co.uk/?Javascript_Function_Pointer_Functions以了解我的看法，

来源

2010-08-11 22:07:42

感谢您的解释，我想我找到基纳得到它足够！ – 2010-08-12 05:57:48

使用onload事件是这样的：

var img = new Image(); 
img.onload = function(){ 
    // image has been loaded 
}; 

// proper way to assign any src right now 
img.src = 'path there'; 

alert(img.width);

来源

2010-08-11 20:37:10 Sarfraz

非常感谢您的快速回答！将img.onload去之前源设置为你已经完成？会不会导致它等到“空白”图像加载，而不是在img.src中设置的那个？ – 2010-08-11 20:53:21

可能是一个愚蠢的问题，但你能否以正常的方式将变量传入onload函数？因为我需要代码中的一些变量需要在onload函数中 – 2010-08-11 21:06:56

@Michael Lawson：是的，你可以在onload函数体块中使用一个变量，在加载后使用src是一个好习惯。 – Sarfraz 2010-08-11 23:50:08

javascript：等待代码中使用的图像加载

回答

相关问题