SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict trican's Avatar
    Join Date
    Sep 2003
    Location
    someplace
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reload an image using Javascript/Ajax

    Hi all,

    I'm completely new to javascript/jquery/ajax/etc (though have loads of experience coding in other languages) and I'm hoping to reload an Image in response to a user interaction with a page (a jquery slider UI element) on my site (in signature). (For complete accuracy a server side program is called in response to the slider and then the image is reloaded).

    So my questions are: will this be relatively straightforward? And secondly do you know of any links that might be useful for me in getting started with this?

    Many thanks!
    Free Image Editing Webapp, includes
    easy to use creative transformations to
    enrich your digital photographs @www.PureRGB.com

  2. #2
    SitePoint Addict trican's Avatar
    Join Date
    Sep 2003
    Location
    someplace
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess my question is probably a little too vague - I'll do a spot more investigation myself and then I'll come back with more focused questions
    Free Image Editing Webapp, includes
    easy to use creative transformations to
    enrich your digital photographs @www.PureRGB.com

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    If you change the src of an image, it'll cause that image to load.

    If you want to load the same image again, you can append something random to the end, after a question mark.

    Ex., I have an image called "image.png". I want to force it to reload, so I just add something random to the end, like a random number, so it becomes:
    "image.png?1542". The same file will load, but the browser thinks it's different, so it causes it to load again.

    Hope that helps.

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by samanime View Post

    If you want to load the same image again, you can append something random to the end, after a question mark.

    Hope that helps.
    Thank you for the tip... I wanted to have an image refresh whenever a user came to the page. It helped me come up with the idea to use PHP to generate a random number, thus forcing the browser to refresh.

    Code:
    <img src="this-week.png?<?php echo rand(5, 9); ?>" />

  5. #5
    SitePoint Addict trican's Avatar
    Join Date
    Sep 2003
    Location
    someplace
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    If you change the src of an image, it'll cause that image to load.

    If you want to load the same image again, you can append something random to the end, after a question mark.

    Ex., I have an image called "image.png". I want to force it to reload, so I just add something random to the end, like a random number, so it becomes:
    "image.png?1542". The same file will load, but the browser thinks it's different, so it causes it to load again.

    Hope that helps.
    Thanks so much for the info! I now have the image reload working fine, never thought it would be so straight forward. The next thing I need to do is to call a php file via ajax. Is it straight forward to get the image reload to wait until the ajax call has finished?

    Many thanks again!
    Free Image Editing Webapp, includes
    easy to use creative transformations to
    enrich your digital photographs @www.PureRGB.com

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by trican View Post
    Is it straight forward to get the image reload to wait until the ajax call has finished?
    Yes but you'd need to do it using JavaScript from within the function that runs when the Ajax call returns rather than doing it from PHP.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Addict trican's Avatar
    Join Date
    Sep 2003
    Location
    someplace
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Yes but you'd need to do it using JavaScript from within the function that runs when the Ajax call returns rather than doing it from PHP.
    thanks - that makes sense
    Free Image Editing Webapp, includes
    easy to use creative transformations to
    enrich your digital photographs @www.PureRGB.com

  8. #8
    SitePoint Addict trican's Avatar
    Join Date
    Sep 2003
    Location
    someplace
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the most part the image reload is working perfectly - though for larger images, there is a noticeable delay between clicking the link/button and the image reloading - would it possible to show a twirling animation before the file is actually ready for reload?
    Free Image Editing Webapp, includes
    easy to use creative transformations to
    enrich your digital photographs @www.PureRGB.com

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Yeah, you'd want to use a preloader.

    Here is an article which describes one approach to it: Preloading and the JavaScript Image() object | TechRepublic

  10. #10
    SitePoint Addict trican's Avatar
    Join Date
    Sep 2003
    Location
    someplace
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    Yeah, you'd want to use a preloader.

    Here is an article which describes one approach to it: Preloading and the JavaScript Image() object | TechRepublic

    Great suggestion - I'm off to implement this. I think I still need to figure out how to display a spinning gif when loading content. Maybe for another day and a separate thread. thanks everyone for the help!
    Free Image Editing Webapp, includes
    easy to use creative transformations to
    enrich your digital photographs @www.PureRGB.com

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Basically all you do is hook in an event for when the image is done loading.

    Then, when you go to change it, change it to the spinning gif.
    Then, once it's done loading, change the spinning gif to the image you just loaded.


Bookmarks

Posting Permissions

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