How to preload images on refresh?

Question

I have a code, which gets refreshed from mysql database on a button click. From the mysql I get links of images on refresh, but I never know, hat links and how many.

I have a "loading" circle which spins until the page is loaded, but it is shown only, until the code is loaded, which is not very long. After that I see small empty squares on my page as placeholders, until the real images show up.

Does anybody have an idea, how to show the spinning circle untill all images are loaded?

I tried some javascript examples found on the net with building arrays of links, but I was not able to integrate them into my code, because the construction of the codes are very different and I obviously am not a pro.

So here is my code (I simplified it for now):

$(document).ready(function() {

    function refresh(free){
        $("#loadingfree").show();
        if (free) datum = datum + free;
    var url = "listfree.php?date=" + datum;
    $.getJSON(url,function(data) {
           var div_data = '';
            $.each(data, function(i,data) {

                div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
            });
            $("#loadingfree").hide();
            $("#app-wrapper-free").html(div_data);

        });

    }

$(document).on('click', '#prevbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(-1);
});

$(document).on('click', '#nextbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(+1);
});

    // call the method when page is opened:
    refresh(0);

});

Pff... why does somebody dowvnvote a simple question without even adding something to the matter? — Hunnenkoenig, Feb 09 '15 at 23:31

score 1 · Answer 1 · answered Feb 09 '15 at 23:52

1

If you want the spinner to continue showing until the images are loaded, you should use the load eventListener to make that happen.

So let's say you have your code that has the spinner while it makes the request to the server.

//just an example
$('button').click(function(){
//call server
    $.ajax();
//show spinner
$('.spinner').show();
});

Now we will tell the spinner to stay showing until the images are done loading.

$('img').on('load',function(){
//Not sure what your spinner is called
    $('.spinner').hide();
});

answered Feb 09 '15 at 23:52

JJJ

3,314
4
29
43

I understand the logic, but it's again not applicable to my code. No matter how I try to integrate it, it doesn't work. My above code uses the "refresh" function on a button click. My loading circle is the `$("#loadingfree").show();` and my images are the `data.icon` variables. The show and hide are on both ends of the refresh function, it still doesn't wait for the images. I am not sure, where I should add the `load` function in there. – Hunnenkoenig Feb 10 '15 at 00:19
Thanks for your efforts, but it doesn't work. I load many images and my refresh function is a function for each row of a database result. I show every images in it's own div, then those divs are shown in a parent div (#app-wrapper-free). If I do it like you said, either the circle never hides or it hides at the first image shown. – Hunnenkoenig Feb 10 '15 at 13:07

Hunnenkoenig · Answer 2 · 2015-02-10T15:40:49.077

I ended up with this. It just shows the content a bit later. It's a fake preloader.

<script type="text/javascript">


var datum = 0;

$(document).ready(function() {



    function refresh(free){



        if (free) datum = datum + free;
    var url = "listfree.php?date=" + datum;
    $.getJSON(url,function(data) {
           var div_data = '';
            $.each(data, function(i,data) {
    if ($("#date_free").html() == '');


                div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
            });

          $("#loadingfree").show();
          $(div_data).hide()

                 .appendTo("#app-wrapper-free")

          setTimeout( function() { 
          $("#app-wrapper-free").children().show() 
          $("#loadingfree").hide()
          }, 3000 );

       });

    }




$(document).on('click', '#prevbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(-1);
});

$(document).on('click', '#nextbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(+1);
});

    // call the method when page is opened:
    refresh(0);

});


</script>

How to preload images on refresh?

2 Answers2