执行onload后加载函数

为了在页面加载完成后执行所有命令，我正在维护一个推送所有命令的数组。这是通过以下方式完成的：执行onload后加载函数

<img src='holder.js/200x280/text:name' 
    alt='name' width='200px' 
    onload='getPoster(this, name)'>

这是一个迭代过程并且在循环中运行约20次。

我希望一旦这项工作完成（页面完全加载）并且所有onload()事件已经堆叠到阵列中，每个都会逐一执行。

我认为$(document).ready()会让我做到这一点，但它也没有帮助。但是，使用setTimeout()函数可以看到最终结果。但这显然不是一件好事。

getPoster功能：

function getPoster(img, title) { 
    commands.push(new titles(img, title)); 
}

你怎么认为，一旦所有的onload事件堆叠我应该去加载图像？

来源

2013-04-22 Namit

处理 “负载” 关于''标签的事件是不可靠的。如果您只是等待文档级别的“加载”事件，则会在所有图像加载时调用该事件。 “准备好”事件发生在*“负载”事件之前。 – Pointy 2013-04-22 16:29:19

JavaScript是一种单线程同步语言。所以基本上，指令是按照你写的顺序处理的。 Ajax请求是异步的，但加载诸如图像之类的东西不是。

因此，让我们说你必须调用4个函数onload，然后你想要加载你的图像。这很容易，尤其是如果你有jQuery。如果您没有进行Ajax请求或任何其他异步操作，则这些函数将同步执行，或者一个接一个地执行。

$(function() {//is equivalent to $(document).ready(function(){ 
    functionOne(); 
    functionTwo(); 
    functionThree(); 
    //etc 
    loadImages(); 

});

达到你想要什么，最有效的方法我能想到的是一个自定义event。使用类似：

$('#foo').on('completedEveryThingElse', function(event) { 
    // So bind the event to whatever wrapper and then trigger it when you are done 
    // loading all other stuff. 
    // Now start loading images. 
}); 

// Whenever you are done loading everything else. 
$('#foo').trigger('completedEveryThingElse');

看一看HERE，jQuery的API为trigger()

来源

2013-04-22 16:24:56 flavian

这是对的，但我的HTML调用（例如）'functionTwo（）'几次，这发生在页面加载时。我想根据需要多次调用'loadImages（）'，一次'functionTwo（）'。 – Namit 2013-04-22 16:28:24

您可以通过使用ImagesLoaded插件实现：

https://github.com/desandro/imagesloaded

来源

2013-04-22 16:23:02

只是跟踪getPoster()多少次被调用，一旦调用次数已达到图像的总数执行每个命令。

来源

2013-04-22 16:23:54

您可以使用此：

<img class="posterImg" src='holder.js/200x280/text:name' alt='name' width='200px'> 

$(document).ready(function() {  
    $(".posterImg").one('load', function() { 
     getPoster(this,$(this).attr('alt')); 
    }).each(function() { 
     if (this.complete) $(this).load(); 
    }); 

});

来源

2013-04-22 16:28:58

谢谢，但是'.each（）'方法一旦加载了所有的'.posterImg'就会工作吗？或者每次加载一个'.posterImg'时它会被执行？ – Namit 2013-04-22 16:33:14

对于每个图像getPoster（）将被调用 – 2013-04-23 08:27:46

执行onload后加载函数

回答

相关问题