locked
A loading message while the image is loading if i change my image src from a jquery function? RRS feed

  • Question

  • User-352524747 posted

    Hi,

    can i display a loading message while the image is loading if i change my image src from a jquery function?

    i use this code to display the message but, this works when the entire page is reloaded. 

    $(function () {
                    var $img = $('#image'),
                        totalImg = $img.length,
                        waitImgDone = function () {
                        totalImg++;
                        if (totalImg) {
                            $('.loading').fadeOut('slow');
                        }
                    };
                    $('#image').on('load', waitImgDone);
                });

    When i submit the changes i do to the src of the image i use a simple function

    $('#form').submit(function (event) {
            var data = $(event.target).find('input');
            var streams = new Streams(data);
    
            data = streams.filter(valid)
                   .map(values)
                   .get();
    
            refreshUrl(data);
    
            event.preventDefault();
        });
    ...
    ...
    
    function refreshUrl(dataValues) {
    
            var URL = URL.concat('@currency', '/');
    
            $('#image').attr("src", URL);
     
        }
    }

    I need to show the message when the src attribute changes. Sometimes it takes time from submit to change the image and i want to display a message.

    Tuesday, October 18, 2016 6:37 PM

Answers

  • User-1838255255 posted

    Hi dow7,

    According to your description , I suggest you use Ajax method , you can  use ajaxStart method and complete method in your page , when you click then trigger ajaxStart event show loading  message , then when ajax call completed , you can hide loading message.

    $.ajax({
       beforeSend: function(){
         // Handle the beforeSend event
       },
       complete: function(){
         // Handle the complete event
       }
       // ......
     });

    You can reference this link to know how to  use method :

    Ajax Events:

    http://api.jquery.com/Ajax_Events/ 

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 19, 2016 8:53 AM