Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Posts
    684
    Thanks
    24
    Thanked 1 Time in 1 Post

    Getting portions of javascript to fire before entire function(s) finishes

    I am changing a image via jQuery, but the image takes a few seconds to load and hence appears like the click did nothing, so I needed to input a temporary "loading" image to show the user that the image is loading.

    However as I have experienced in the past JS doesn't really fire things as things happen, it waits until the full function is done before things happen; I recall coming up with a solution in the past but I just can't remember what it was.

    I have this which does each task, but the user never sees the loading image because it is replaced by the new image before the user even sees anything.

    Code:
    function changeMainImage(image) {
    
        // Set temporary loading image
        jQuery('#main_image').attr('src', 'images/loading.jpeg');    
    
        // Set big image
        var big_image = image + '-big.png'
    
        // Update main image url
        jQuery('#main_image').attr('src', big_image);
    
    }
    I have tried putting the below into a separate function:

    Code:
    // Set temporary loading image
    jQuery('#main_image').attr('src', 'images/loading.jpeg');
    ..and calling it before the other function like so..

    Code:
    onclick="setLoadingIMage(); changeMainImage('images/ai');"
    but that didn't change anything.

    Could anyone tell me what I need to do to achieve the effect I want?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    jQuery (and JS) do not wait for the function to complete before executing statements.

    A couple of ways of doing this this are outlined here.

    You might also consider pre-caching the big image(s). That is, creating new Image()'s and setting their src to the big images as, or just after, the page has loaded.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    cyphix (12-12-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2004
    Posts
    684
    Thanks
    24
    Thanked 1 Time in 1 Post
    Perhaps I didn't use the correct wording, but as I understand it nothing is returned to "the screen" until it is done.

    Have considered loading the images when the page does, but I chose to avoid this as the user may not even want to look at all the images (can be up to 12) and thus be an overhead we do not need.

    Thanks for the link though - I'll check it out!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •