LINUX.ORG.RU

Javascript и проблема асинфронности.

 , ,


0

1

Всем привет!

Есть два изображения, которые создаются из js и добавляются в DOM. Нужно по окончанию загрузки обоих изображений (на onload()) выполнит определенное действие. Как, собственно, этого можно добиться. К слову, два изображения, это пример, а на деле их может быть больше.

     var image1 = new Image();
     image1.style.display="none";
     $("body").append(image1);
     image1.onload = function() {
       // some code
     };
     image1.src = "1.jpg";



     var image2 = new Image();
     image2.style.display="none";
     $("body").append(image2);
     image2.onload = function() {
     // some code
     };
     image2.src = "2.jpg";
     }
     


Последнее исправление: djnoob (всего исправлений: 1)

Самое простейшее

При создании изображения прибавляй счетчик, после загрузки (в случае неудачи тоже) убавляй и проверяй, если 0, то делай что хотел.

metrokto ★★
()
Ответ на: Самое простейшее от metrokto

Да дело в том, что при загрузке каждого из изображений, нужно совершать уникальные действия. А после того, как все изображения загрузились - одно.

djnoob
() автор топика

Ну так загружай по ajax, далее на callback вешаешь нужное действие.

создаются из js

если это значит что они не загружаются вообще а просто создаются в векторе, то опять на завершение создания каждого повесить нужное действие, а когда images.length достигнет последнего то выполнить последнее действие.

invokercd ★★★★
()

Как-то так:

images = [1, 2, 3, ...];
counter = images.length;
finishCallback = function () {
    if (counter > 0) {
        return;
    }
    // ...
}
$body = $(document.body);
images.forEach(function (image) {
    image = new Image();
    image.style.display = "none";
    $body.append(image);
    image.onload = function () {
        // TODO: custom callback
        counter--;
        finishCallback();
    };
    image.src = image + ".jpg";
});
Kilte ★★★★★
()

Сделай себе очередь объектов со всей нужной информацией и хоть вприсядку потом.

anonymous
()
Ответ на: комментарий от anonymous

Скажи это ОПу. Я его код скопипастил вначале просто. Да и в конце-концов. Это всего-лишь пример.

Kilte ★★★★★
()
Ответ на: комментарий от noomorph

Спасибо, промисы то, что нужно.

djnoob
() автор топика
Images={
 images: 0, counter: 0, on: function(){alert("ready")},
 create: function(){return Object.create(this)},
 add: function(url){var img=new Image; img.src=url; img.onload=this.onload(img); this.images++},
 onload: function(img){
  return function(){
   theParent.appendChild(img)
   with(this){
       if(++counter===images) on()
   }
  }.bind(this)
 }
}

with(Images.create()){
 add("http://the-host/img1.jpg")
 add("http://the-host/img2.jpg")
}
nond
()
Ответ на: комментарий от Twissel

1) With там используется для более короткой записи, принципиальной роли он не играет

2) Я не совсем понимаю, что значит «устаревший», with из языка никуда не делся, в спеках ES6 он есть.

nond
()
Ответ на: комментарий от nond

Уже не помню где натыкался, что в интерпретаторе это дорогая операция и ее настоятельно не рекомендовали использовать.

Может на javascript.ru точно таки не скажу.

Twissel ★★★★★
()
Ответ на: комментарий от Twissel

Возможно она и дорогая (если быть точней, код с with плохо сжимается), но в случае единичной инициализации это не имеет ни малейшего значнения.

nond
()
Ответ на: комментарий от Twissel

По-моему, в этой мурзилке отсебятина. Если она не работает в use strict — это не значит, что она устаревшая. По идее, use strict — это некое подмножество языка для жаба-секретуток, которые не в состоянии осилить JS, не более того.

nond
()
Ответ на: комментарий от Twissel

Кстати, этот дурачек, который там разглагольствует, сам не понимает, как работает with

При использовании with, как и во вложенных функциях — переменная изменяется в той области, где была найдена.

Это утверждение не верно. На самом деле, будет создана новая переменная, в том окружении, из которого производится присваивание.

nond
()
Ответ на: комментарий от nond

И цитата отсюда:

Производительность: оператор with невозможно оптимизировать автоматически, потому что заранее не известно куда будет ссылаться arg: на реальную переменную или на свойство переменной внутри with. Это может измениться при каждом вызове.

Безопасность: нельзя определить куда ссылается переменная глядя на её окрестности (её лексическое окружение). По словам Brendan Eich именно из-за этого with считается устаревшим, а не из-за соображений производительности.

Так что, увы, но не все так однозначно...

Twissel ★★★★★
()
Ответ на: комментарий от Twissel

Производительность: оператор with невозможно оптимизировать автоматически, потому что заранее не известно куда будет ссылаться arg: на реальную переменную или на свойство переменной внутри with. Это может измениться при каждом вызове.

С этим я не спорю, я уже отписался по этому поводу выше.

Безопасность: нельзя определить куда ссылается переменная глядя на её окрестности (её лексическое окружение). По словам Brendan Eich именно из-за этого with считается устаревшим, а не из-за соображений производительности.

это бред какой то. Как из того что нельзя определить куда ссылается переменная глядя на лексическое окружение, следует то, что она «опасна». Она опасна, конечно, если не знаешь, как она работает, то есть опасна для дурачка. Так же как и все остальное. В js и без нее динамического связывания хватает.

Кстати, хотелось бы увидеть оригинальную цитату Айка, а не бессмертную интерпретацию Васи Пупкина.

nond
()

Есть либа createjs, для создания игрушек на JS. Состоит из нескольких независимых библиотек, в т.ч. preloadJS, http://www.createjs.com/PreloadJS .

Суть простая: создаем список, кого хотим загрузить, добавляем его в очередь, и командуем каждому запросу «Поехали». Каждый загруженный файл будет дергать коллбак onProgress, после загрузки последнего вызовется коллбак «Все готово».

Вот их примеры: работающий, http://www.createjs.com/Demos/PreloadJS/PreloadImages , и описательный: http://nightlycoding.com/index.php/2012/09/image-slideshow-with-preloadjs-jqu... .

Правда, JS-ка довольно толстая, ~20Kb даже в пожатом виде; да и за последний год они что-то там рефакторили, так что доки частично устарели.

anonymous
()
Ответ на: комментарий от Twissel

Вообще, это странно как то звучит. типа, он несколько десятков лет назад запилил эту контрукцию, все это время дорабатывал дизайн, и только сейчас вдруг, внезапно, узнал об этой «проблеме». Что то там нечисто. Возможно Айк просто пляшет под чью то дудку.

В любом случае, речь идет только про стрикт мод.

nond
()
Ответ на: комментарий от Twissel

Я про то, что там не написано, «устаревший», там обсуждается, что он не работает в strict mode, это разные вещи, так что Вая наврал, ЧТД

nond
()
Ответ на: комментарий от nond

Не помню уже где читал, что когда движки js были «молоды» with была лишена подобных недостатков.

Может и байка, пруфов привести не смогу — давно это было да и сведения были недостоверны.

Twissel ★★★★★
()
Ответ на: комментарий от Twissel

Да, это правда. JS движки были почти чистыми интерпретаторами. Но это касается только вопросов производительности.

nond
()
Ответ на: комментарий от Twissel

А лишена, это в смысле, статическим анализом кода тогда никто не занимался. Поэтому похрену было.

nond
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.