加载Javascript图像

我想在每次加载完成前载入的图像时加载新图像。函数create_photo_list正常工作。它会创建一组需要加载的照片。如果不需要加载，则数组为空。问题是，当没有更多的项目加载时，它会一直调用load_next_photo函数。加载Javascript图像

我每次在函数中调用registerEventHandler的原因是因为如果我不这样做，下一张照片加载时不会调用该函数。

function registerEventHandler(node, event, handler) { 
    if (typeof node.addEventListener == "function") 
     node.addEventListener(event, handler, false); 
    else 
     node.attachEvent("on" + event, handler); 
} 

// Remove an HTML element event handler such as onclick 
// ex: unregisterEventHandler($("textfield"), "keypress", showEvent); 
function unregisterEventHandler(node, event, handler) { 
if (typeof node.removeEventListener == "function") 
    node.removeEventListener(event, handler, false); 
else 
    node.detachEvent("on" + event, handler); 
} 

function load_next_photo() { 
    var loading_list = create_photo_list(); 
    alert(loading_list.length); 
    if (loading_list.length > 0) { 
     img[loading_list[0]]['loaded'] = 1; 
     registerEventHandler($("load_img"), "onload", load_next_photo()); 
     $("load_img").src = img[loading_list[0]]['img']; 
    } 
    else { 
     alert("nothing"); 
     unregisterEventHandler($("load_img"), "onload", load_next_photo()) 
    } 
    unregisterEventHandler($("load_img"), "onload", load_next_photo()) 
}

来源

2011-03-20 SamB

只是好奇，为什么你不使用jQuery的所有事件侦听代码？ – JohnP 2011-03-20 05:35:05

我是一个业余开发人员，我以前没有听说过;）但我真的更喜欢解决方法的答案。 – SamB 2011-03-20 05:41:34

不，不是，我的意思是所有'$（“load_img”）'调用。这看起来像jQuery（除非你有自己的框架设置）。 – JohnP 2011-03-20 05:51:46

不能让我的身边你目前拥有的头，但这样的代码工作得很好：

var _images = ["image1.jpg", "image2.jpg", "image3.jpg"]; 
var _index = 0; 

window.onload = function() { 
    LoadImage(); 
}; 

function LoadImage() { 
    //stop condition: 
    if (_index >= _images.length) 
     return false; 

    var url = _images[_index]; 
    var img = new Image(); 
    img.src = url; 
    img.onload = function() { 
     _index++; 
     LoadImage(); 
    }; 

    document.getElementById("Container").appendChild(img); 
}

这将图像（ID为Container元素）逐一添加到容器，现场测试案例：http://jsfiddle.net/yahavbr/vkQQ7/

这是普通的JS，随时问任何部分的详细说明。 :)

来源

2011-03-20 11:16:41

带警报的版本显示它真的是一个接一个地加载：http：/ /jsfiddle.net/yahavbr/vkQQ7/1/ – 2011-03-20 11:18:50

所以它的工作原理，但我有一个名为img的函数之外的数组。当我尝试在函数中引用它时（例如alert（img [first_photo] ['img']）;）它给出一个未捕获的类型错误：无法读取未定义的属性'3'。我知道数组存在。这会导致什么？ – SamB 2011-03-20 17:08:17

@Sam try'alert（typeof img）;' - 你看到了什么？如果“未定义”，则意味着由于某种原因，它在任何地方都不是**定义的。发布相关代码（编辑您的原始问题），我们将尝试查看原因。当你这样做时请发表评论，以便我得到通知。 – 2011-03-20 20:46:23

加载Javascript图像

回答

相关问题