Opóźnienie funkcji dopóki obrazki / dane nie zostaną wczytane

[Latreso]

Witajcie.

 

Mam pewien problem z javascript, mianowicie tworzę grę i potrzebuję aby pasek ładowania gdy zwiększał się po załadowaniu kolejnych obrazków, wygenerowaniu terenu itp (chodzi o efekt płynnego ładowania, a nie "trwa ładowanie 5%" i nagle 100% po kilku s);

Przypuśćmy, że w zmiennej posiadam nazwy obrazków

var obrazek = ['0.png','1.png','2.png','2-1.png','2-2.png','2-3.png','2-4.png','2-5.png','2-6.png','2-7.png','2-9.png','2-a.png','building-1.png']; //itd...

Dla ułatwienia problemu, powiedzmy, że skrypt ma jedynie wczytać obrazki, zatem:

//1.Zacznij wczytywać 1. obrazek
//2.Czekaj aż wczytywanie się zakończy
//(z tym nie ma najmniejszego problemu, można pominąć)3.Zaktualizuj progressbar
//4.Zacznij wczytywać kolejny obrazek

//Obecnie posiadam taki oto kod:
function loadimg(){
  for(var i in obrazek){
    game.img[i] = new Image().src = 'img/'+obrazek[i];
    progressbar();//wywołuje osobną funkcję do aktualizowania paska ładowania, w tym problemie to nas nie interesuje
  }
}
loadimg();

Problem w tym, że wszystkie wczytują się w jednym momencie, a pasek ładowania wynosi 100% nawet jeśli nie zakończyło się wczytywanie

 

Próbowałem z użyciem jquery .when().then(); / .when().done(); jednak nic z tego

[Hans Kloss PL]

Racja - błąd, na początku zrobiłem inaczej i było ok ale przekombinowałem

 

Tu masz poprawną wersję:

{
  const sources = [
    'https://placekitten.com/1000/1000',
    'https://placekitten.com/900/1000',
    'https://placekitten.com/800/1000',
    'https://placekitten.com/700/1000',
    'https://placekitten.com/600/1000',
  ];

  let percentage = 0;
  const increase = 100 / sources.length;

  const changeBar = () => {
    percentage += increase;
    console.log(`${percentage}%`);
  };

  const images = sources.map((source) => {
    const image = new Image();

    image.addEventListener('load', changeBar);
    image.src = source;

    return image;
  });
}

Codepen: http://codepen.io/anon/pen/mAGbaE?editors=0012

[theoo]

znalazłem ciekawy plugin na githubie

https://github.com/alexanderdickson/waitForImages

 

a w nim to co powinno Cię zainteresować:

$('selector').waitForImages({
    finished: function() {
        // ...
    },
    each: function() {
       // ...
    },
    waitForAll: true
});

[Vertisan]

Zamykam na prośbę autora.

[Latreso]

To powinno się nadać:

 

Zmieniłem obrazki na takie, które więcej ważą i jak się okazało "opóźnienie" działa, ale nie do końca tak jak powinno (patrz spoiler).

Działa natomiast opóźnienie więc postaram się coś sam wykombinować, jak będę miał jakiś problem to jeszcze napiszę

 

 

 

 

[Latreso]

Racja - błąd, na początku zrobiłem inaczej i było ok ale przekombinowałem

Nie było najmniejszego problemu z wykombinowaniem przeniesienia tej części do chanheBar()

Dodatkowo dzięki za metodę map(), na pewno przyda się w przyszłości

 

//close

[Hans Kloss PL]

To powinno się nadać:

const sources = [
  'https://placekitten.com/1000/1000',
  'https://placekitten.com/900/1000',
  'https://placekitten.com/800/1000',
  'https://placekitten.com/700/1000',
  'https://placekitten.com/600/1000',
];

const changeBar = (percentage) => {
  console.log(`${percentage}%`);
};

const images = sources.map((source, index, arr) => {
  const image = new Image();
  const percentage = 100 / arr.length * (index + 1);

  image.addEventListener('load', () => changeBar(percentage));
  image.src = source;

  return image;
});

CodePen: http://codepen.io/anon/pen/vXaVRN?editors=0012