28.07.2014, 15:06
|
|
Интересующийся
|
|
Регистрация: 30.08.2013
Сообщений: 19
|
|
|
Ожидание завершения ассинхронных функций
Здравствуйте. Есть проблема.
В цикле грузятся фотографии, нужно узнать их количество и ширину общего блока, я знаю как повесить обработчики на каждую фотку отдельно, но как дождаться загрузки всех, не знаю.
|
|
28.07.2014, 15:15
|
|
Профессор
|
|
Регистрация: 16.03.2010
Сообщений: 1,618
|
|
|
Делаешь счётчик, равный количеству фоток. При загрузке каждой из них, отнимаешь единицу. Если счётчик равен нулю, значит все фотки загрузились.
|
|
28.07.2014, 16:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
callback после загрузки всех фото
KlausKater,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.gallery img{
width: 150px;
height: 100px;
}
</style>
<script>
window.onload = function () {
var imgs = document.querySelectorAll('.gallery img');
var arr_src =['http://www.anypics.ru/pic/201302/1366x768/anypics.ru-59453.jpg',
'http://www.wall-papers.ru/main.php?g2_view=core.DownloadItem&g2_itemId=38417&g2_serialNumber=3',
'http://w7t.ru/zooms/7da1/7/6168262b44.jpg',
'http://imgs.mi9.com/uploads/cartoon/4834/disney-cartoon-wallpaper_1366x768_88837.jpg',
'http://biskvitka.net/uploads/posts/2011-05/thumbs/1306582219_12.jpg'];
var callback = function ()
{
alert('complete')
};
for (var i = 0, len = imgs.length; i < imgs.length; i++) {
var img = document.createElement('img');
img.onload = img.onerror = (function (a)
{
return function (event) {
imgs[a].src = event && event.type == 'load'? this.src: 'data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD\
/2wCEAAkGBxQRERMQEhQQFBIQEBATEBcUFhsQFBERFx0WFhQVGBQYHyggGBolHRMUITEhJSkrLi4uFx8zODMsNygtLisBCgoKBQUFDgUF\
DisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAIgAtAMBIgACEQEDEQH/xAAaAA\
EBAQEBAQEAAAAAAAAAAAAABAMBAgUH/8QANBAAAgEBBQYGAgECBwAAAAAAAAECEQMEElFhEyExMkGRFCJygYLRccGxUqEFM2KSwuHw/8QA\
FAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AP2+cqcOrpkcrLKPd/QtOnqRnbzae7IDSs\
so939Csso939E21eY2rzAprLKPd/QrLKPd/RNtXmNq8wKayyj3f0Kyyj3f0TbV5javMCmsso939Csso939E21eY2rzAprLKPd/QrLKPd/R\
NtXmNq8wKayyj3f0Kyyj3f0TbV5javMCmsso939Csso939E21eY2rzAprLKPd/QrLKPd/RNtXmNq8wKayyj3f0Kyyj3f0TbV5javMCmsso\
939HJTa6Liuv8A0T7V5lE+VfH+UBoAAPFp09SMbzx9ja06epGN54+wGQAAAAAAAABwDoOADoOHQAAAAAAAABTLlXx/RMUy5V8f0BqAAPFp\
09SMbzx9ja06epGN54+wGQAAAHmcqKuQHoEviHoPEPQD3eZ9CYzvF6o3ucmlV04L8vocsrwnRNOLkt1eD/DA1B3rRtJ5NpPsJpR3NxT1aQ\
HD1GVHU8OaSq3Gmdd3c6nXeqNabwL0zpJC2aVNx3xD0AqBjZW1XRmwAAACmXKvj+iYplyr4/oDUAAeLTp6kY3nj7G1p09SMbzx9gMgAAM7\
blZoZ2/KwJAABHN4domn56uLSquHB04G9kk42aVfK4uUqUUadFmV3aHF+x4tZ1dOi4ASRvEVGalTFilirxf9NP7HbS1ezhiSrWzrmbNLjR\
VDA7OcXaRxUSwvDXhir/JlZQpK0ceRyVMq030NGVQ80af+qBKdAA0u/MvcrJLvzL3KwAAAFMuVfH9ExTLlXx/QGoAA8WnT1IxvPH2NrTp6\
kY3nj7AZAAAT3+1wwbonvit+7iygl/xGycrNpU4xe/dwYEe2abi0qqDkqOq/DyPKvEsONxWGlXv81M6HnYNYpUjFbOSaTriOWcJuzUfLRx\
SrXfhemYF0Ld0wwSbSxOrot/BfkknfElGVOaTT/wBNOJtZ3be2lGSolSTpSm6pjaXPli8O5ycqblvTW4D3aW6U4w/qrXRdP4PHiXRzUU4K\
vWkmlxaR4srrJOMpNNqTxemmFHFdGlhpZvjST401WYFKtliw7qYVJOvGp7u168tacbTBx/O/+xirusdWotYIxX5WhrY3RqzSdP8ANxvLDv\
A5aWyxyXRRcq+5l4h0U3FKLp18yT4No67usUnRKMoU3bt9cjy7GTioPDRUq097S06AW2HN3KySw5u5WAAAAplyr4/omKZcq+P6A1AAHi06\
epGN54+xtadPUjG88fYDIAADO35Wepyom8k2fPtsSstriliopUr5eK3UA9NBKm5dCe1j54eaaUsTaxNdKnaOU3HFJKCjwdG2+rYFVnOjqU\
TgpKqPmYnFxrLFGrhL/jXU9XeTkpSrJJyeGjapFbugFMoNdDyomFneWrJSrLFKiq3iSq6VoylPC15ptNNNSe9vNZAaWVh1Z28WnRe5HCTd\
pJYp0jgp5m+OZFG1eFOtpix8W3gpWm/pwA+kCSds4441bkmsH4lw7C0m8Sg3OkYJvDxk9WBfd+Ze5WfKu1ZJ1c0446OuFtU3VoW3KPkjJu\
Tcoxbq2+1QKAAAKZcq+P6JimXKvj+gNQAB4tOnqRjeePsbWnT1IxvPH2AyAAAmlc40p5sNa4a+Wv4KTjAnldk2pb6xrT3PNpc4t18ydKVT\
pVFNBQCC83VKGzjGTxcNHWrbZRC7pJLJUN6HaASq5xw4KNqmfucs7nFOtZNpUVXWn4K6CgE8bslJy31dK78jFf4fGlKzw1rSu7MuocoBBK\
7KVqnhaUE976vpQ2tLpFuvmTW6qdHTIpoKAY2N2jFUVd9a1dW68Wa2cMKUVwSSR6SOgAAAKZcq+P6JimXKvj+gNQAB4tOnqRjeePsbWnT1\
I8Wtk2+nACcGvh3oPDvQDIGvh3oPDvQDIGvh3oPDvQDIGvh3oPDvQDIGvh3oPDvQDIGvh3oPDvQDIGvh3oPDvQDIGvh3oPDvQDIGvh3oPD\
vQDIplyr4/oz8O9DWa8v8At/lAaAADzKNTmz1l3AAbPWXcbPWXcABs9Zdxs9ZdwAGz1l3Gz1l3AAbPWXcbPWXcABs9Zdxs9ZdwAGz1l3Gz\
1l3AAbPWXcbPWXcABs9Zdxs9ZdwAGz1l3Gz1l3AAbPWXc47PV9wANAAB/9k='; //ссылка на фото отстутствует
}
}
)(i);
imgs[i].onload = function ()
{
!--len && callback()
};
//img.src = arr_src[i]; убрать коментарий и строку ниже
img.src = Math.random() > .7? '1.jpg': arr_src[i]; //тест на ошибку загрузки
img.complete && img.onload()
}
}
</script>
</head>
<body>
<div class="gallery">
<img src="http://pampinta.com/imgs/img_loader.gif" alt="" />
<img src="http://pampinta.com/imgs/img_loader.gif" alt="" />
<img src="http://pampinta.com/imgs/img_loader.gif" alt="" />
<img src="http://pampinta.com/imgs/img_loader.gif" alt="" />
<img src="http://pampinta.com/imgs/img_loader.gif" alt="" />
</div>
</body>
</html>
Последний раз редактировалось рони, 28.07.2014 в 23:38.
|
|
30.07.2014, 16:32
|
|
Интересующийся
|
|
Регистрация: 30.08.2013
Сообщений: 19
|
|
|
Первый вариант, все таки костыль... У языка с возможностью ассинхронного выполнения - нет средств для взаимодейтсвия между этими функциями? мда. Сурово )
Рони, спасибо за старания, извини ничерта не понял твой код ))
Вариант сделать цикл и в нем ждать какого то события и у меня был, но это совсем не правильно ((
|
|
30.07.2014, 16:49
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Сообщение от KlausKater
|
|
Первый вариант, все таки костыль... У языка с возможностью ассинхронного выполнения - нет средств для взаимодейтсвия между этими функциями? мда. Сурово )((
|
Вообще то это не костыль. Это обычная логика. Если вам нужны средства для связи этих событий никто не мешает вам таковые написать или пользовать готовые библиотеки/фреймворки.
Я например написал себе модуль загрузки картинок, который генерирует события при загрузке каждой картинки, сообщает прогресс в % и генерирует событие когда все загружено и пользую его. Язык вам даёт все что нужно, а именно событие загрузки картинки. Откуда ему знать какие вы хотите обрабатывать, а какие - нет?
Последний раз редактировалось tsigel, 30.07.2014 в 16:56.
|
|
30.07.2014, 18:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от KlausKater
|
|
ничерта не понял твой код
|
|
Сообщение от Sweet
|
|
Делаешь счётчик, равный количеству фоток. При загрузке каждой из них, отнимаешь единицу. Если счётчик равен нулю, значит все фотки загрузились.
|
|
Сообщение от рони
|
|
!--len && callback()
|
 |
|
31.07.2014, 05:37
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
Как-то так это делается, если писать по-человечески  :
function loadedCallback(){
alert('загружены все');
}
document.addEventListener("DOMContentLoaded", function(event) { //когда загружен dom
//картинок ещё не загружено
var imgsLoading = 0;
//обработчик загрузки
function loaded(){
//декрементируем кол-во загружающихся картинок, и если после этого осталось 0 - значит загружены все
if(--imgsLoading === 0) loadedCallback();
}
//полуаем все картинки, если нужны не все, а из какого-то блока, соответственно меняем document на нужный элемент.
var imgs = document.getElementsByTagName('img'), i = imgs.length;
//перебираем в цикле
while(i--){
//если уже загружена - переходим к следующей
if(imgs[i].complete) break;
//инкрементируем кол-во незагруженных
imgsLoading++;
//вешаем обработчик на случай загрузки или ошибки
imgs[i].onload = imgs[i].onerror = loaded;
}
//если все уже загружены - сразу вызывем колбэк
if(imgsLoading === 0) loadedCallback();
});
__________________
29375, 35
Последний раз редактировалось Aetae, 31.07.2014 в 05:42.
|
|
|
|
