Ожидание завершения ассинхронных функций
Здравствуйте. Есть проблема.
В цикле грузятся фотографии, нужно узнать их количество и ширину общего блока, я знаю как повесить обработчики на каждую фотку отдельно, но как дождаться загрузки всех, не знаю. |
Делаешь счётчик, равный количеству фоток. При загрузке каждой из них, отнимаешь единицу. Если счётчик равен нулю, значит все фотки загрузились.
|
callback после загрузки всех фото
KlausKater,
:write: <!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> |
Первый вариант, все таки костыль... У языка с возможностью ассинхронного выполнения - нет средств для взаимодейтсвия между этими функциями? мда. Сурово )
Рони, спасибо за старания, извини ничерта не понял твой код )) Вариант сделать цикл и в нем ждать какого то события и у меня был, но это совсем не правильно (( |
Цитата:
Я например написал себе модуль загрузки картинок, который генерирует события при загрузке каждой картинки, сообщает прогресс в % и генерирует событие когда все загружено и пользую его. Язык вам даёт все что нужно, а именно событие загрузки картинки. Откуда ему знать какие вы хотите обрабатывать, а какие - нет? |
Цитата:
Цитата:
Цитата:
|
Как-то так это делается, если писать по-человечески:):
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(); }); |
Часовой пояс GMT +3, время: 14:48. |