Displaying image loading process as % on page load

37
October 22, 2019, at 5:00 PM

I am trying to make loading screen. So i use jQuery for that.

<div class="loading">
    <p class="percentage"></p>
</div>
$(document).ready(function(){
    var percentage = $(".loading .percentage")
        imgs = $("img"),
        imgPercentage = (100 / imgs.length),
        curPercentage = 0;
    imgs.on("load",function(){
        curPercentage += imgPercentage;
        percentage.text(Math.round(curPercentage) + '%');
    });
});

So as you see I'm using img and trying to display img's load percentage 'till 100%. But there is a problem. Because it doesn't update it 'till 100%, it just stopping at 67%.

Answer 1
function loader(imagearray) {
        var increment = Math.floor(100 / imagearray.length);
        $(imagearray).each(function() {
            $('<img>').attr("src", this).load(function() {
                $('.progress-bar').animate({
                    width: "+=" + increment + "%"
                }, 100);
            });
        });
        calcPercent = setInterval(function() {
            $percent.text(Math.floor(($progress.width() / $('.loader').width()) * 100) + '%');
        });
    }
READ ALSO
Check if URL has changed in javascript (cannot use hashChanged)

Check if URL has changed in javascript (cannot use hashChanged)

I've looked through a lot of questions and I can't find a solution that works well within my environmentThis is done within Shopify, I have a product with variants

27
jQuery hide Show More button when text is limited

jQuery hide Show More button when text is limited

I am trying to use a Show More/Show Less button for texts to expand and contract the long texts/paragraphsThe code seems to work fine in all aspect

53
Click event fired twice on touch device

Click event fired twice on touch device

I have a checkbox in a sortable div where the click or changed event is triggered twice on touch devices but not on desktop (nor simulating touch on Firefox dev tools) for some obscure reasonThe unwanted effect is the checkbox being toggled twice in a row leaving...

30
Upload a photo on click/submit button

Upload a photo on click/submit button

how can I get jQuery to execute on click instead of just when user chooses a file? I tried onclick and submit on line 2 instead of change, to no avail:

33