Problem z .on(load) i ładowaniem zdjęć gdy zdjęcia są w cache

Question

Witam wszystkich forumowiczów. Tak jak w tytule mam problem :)

Efekt ma być takie, że najpierw pokazuje się pasek postępu a gdy wszystkie zdjęcia są załadowane pasek postępu znika i pojawia się pierwsze zdjęcie.

Mam taki kod.

$(function () {
   var count = $('.newsSliderPhotoBoxes').find('img[data-i]').length;
   var step = 100 / count;
   step = step.toFixed(2);
   var pr = 0;
   $('.newsSliderPhotoBoxes').find('img[data-i]').on('load', function () {
      count--;
      pr = (countsum - count) * step;
      pr = pr.toFixed(0);
      $('.progressComplete').width(pr + '%');
      $('.progressCompleteText').html(pr + '%');
      if (count == 0) {
         $('.progressBar').animate({
            opacity: 0
         }, 500);
         $('.newsSliderPhotoBoxes').find('img[data-i=1]').animate({
            opacity: 1
         }, 500);
      }
   })
})

Problem dotyczy zachowania funkcji .on(load). Wszystko działa prawidłowo w momencie pierwszego ładowania strony. Gdy przejdziemy na podstronę i wrócimy z powrotem .on(load) się nie uruchamia.

Co jest przyczyną? Zakładam że chodzi o zdjęcia, które zostały raz załadowane i znajdują się w cache. Jak spowodować aby .on(load) działał zawsze?

Przejrzał masę stron, analizowałem gotowe skrypty i nie mam pojęcia jak sobie z tym poradzić.

Comments

Uźywasz AJAX'a żeby przechodzić na podstrony i z powrotem?

---

Nie. Normalnie. Przeglądarka się przeładowuje...

Answer 1

Problem rozwiązany. .on('load') nie jest dobrym rozwiązaniem dlatego inaczej to zapisałem

Funkcja ładująca zdjęcia i generująca pasek postępu

function loadArticle(content) {
        var r = $.Deferred();
        var count = content.find('img').length;
        var loaded = 0;
        var step = 100 / count;
        step = step.toFixed(2);
        var pr = 0;
        var i = 0;
        var img = new Array();
        content.find('img').each(function () {
            var src = $(this).attr('src')
            img[i] = new Image();
            img[i].src = src;
            img[i].onload = function () {
                loaded++;
                pr = loaded * step;
                pr = pr.toFixed(0);
                $('.progressComplete').width(pr + '%');
                $('.progressCompleteText').html(pr + '%');
            }
            img[i].onerror = function () {
                count--
            };
            i++
        })
        var interval = setInterval(function () {
            if (loaded == count) {
                $('.progressBar').animate({
                    opacity: 0
                }, 500);
                setTimeout(function () {
                    clearInterval(interval); // stop the interval
                    r.resolve();
                }, 100)
            }
        })
        return r;
    }

Wywołanie funkcji

$('.ProjectImages').append('<div class="progressBar"><span class="progressCompleteText">0%</span><div class="progressComplete"></div></div>');
    loadArticle($('.ProjectImagesContent')).done(function () {
        $('.ProjectImages').find('.progressBar').remove();
        $('.ProjectImagesContent').animate({
            opacity: '1'
        }, 500);
    })

Mam nadzieje, że komuś się moje rozwiązanie przyda