如何等待图像,直到完成加载执行下一个操作
问题描述:
我在这里面临一个大问题,每次我调用这个JavaScript函数时,它不会等到left
和right
图像加载,但它立即进入下一个操作我想要的是停止,直到left
和right
图像加载图像完全然后它去syllable_text.html(slice.The_Syl);
线如何等待图像,直到完成加载执行下一个操作
function showImagesByPairAtInterval(Syllables, interval, index) {
index = index || 0;
let slice = Syllables[index];
left.attr('src', "http://example.com/"+ slice.Url1);
right.attr('src', "http://example.com/"+ slice.Url2);
syllable_text.html(slice.The_Syl);
nextIndex = index + 1;
if (nextIndex <= Syllables.length - 1) {
setTimeout(showImagesByPairAtInterval.bind(
null,
Syllables,
interval,
nextIndex
), interval);
}
}
在这里,我如何调用该函数
showImagesByPairAtInterval(syllables.Syllables, 3000);
个这里的拖车图像
<div id="images" style="display: flex;">
<img src="" id="left_image" name="left_image" alt="" />
<img src="" id="right_image" name="right_image" alt="" />
</div>
更新脚本
使用ImagesLoaded脚本,我在ImagesLoaded 发现像
function showImagesByPairAtInterval(Syllables, interval, index) {
index = index || 0;
let slice = Syllables[index];
left.attr('src', "http://deaf-api.azurewebsites.net/"+ slice.Url1);
right.attr('src', "http://deaf-api.azurewebsites.net/"+ slice.Url2);
while (!$("#images").imagesLoaded().always()) {
}
syllable_text.html(slice.The_Syl);
nextIndex = index + 1;
if (nextIndex <= Syllables.length - 1) {
setTimeout(showImagesByPairAtInterval.bind(
null,
Syllables,
interval,
nextIndex
), interval);
}
}
现在看来似乎并不关心,当所有后图像真的完成加载我假设有第二种方式来使用此脚本
答
好吧,我想发布解决方案,因为我认为这个问题ImagesLoaded
脚本可能不知道left
和right
图像被加载或没有,所以我决定做出新的图像,我可以告诉它尚未加载和之后我检查它的加载我改变left
和right
相似图片
function showImagesByPairAtInterval(Syllables, interval, index) {
index = index || 0;
let slice = Syllables[index];
var left_img = new Image();
var right_img = new Image();
var div_img = document.createElement('div');
var $div_img = $("<div>");
$div_img.append(left_img);
$div_img.append(right_img);
left_img.src = "example.com/" + slice.Url1;
right_img.src = "example.com/" + slice.Url2;
while (!$div_img.imagesLoaded().done()) {
}
left.attr('src', "http://example.com/" + slice.Url1);
right.attr('src', "http://example.com/" + slice.Url2);
syllable_text.html(slice.The_Syl);
nextIndex = index + 1;
if (nextIndex <= Syllables.length - 1) {
setTimeout(showImagesByPairAtInterval.bind(
null,
Syllables,
interval,
nextIndex
), interval);
}
}
https://developer.mozilla.org/en-US/docs/Web/Events/load – Kaiido
我知道,它必须是一个'ready'事件,但我不知道如何使用它在这个序列 –
也许像http://imagesloaded.desandro.com/会有所帮助。否则在这种情况下执行一些代码之前,检查这两个图像是否有点痛苦。 –