Results 1 to 4 of 4

Thread: How to know if image loaded from cache or not?

  1. #1
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to know if image loaded from cache or not?

    Hello!

    I need to know if an image was loaded from cache or from the server.

    image = new Image();
    image.src = "http://...";

    I have a callback function that is called when image is loaded.

    I need to count (on server side) how many times the image was accessed on the server (not in browser cache).

    Meanwhile I calculate the time which it took image to load and if the time is "large" (means image loaded from server) I call server php script which increases count.

    But I have a problem to establish the correct time threshold.

    Is there an exact way to know if image was loaded from cache or not?

    Thanks in advance...

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't think so. However, you can force the browser to make a fresh request by appending a unique query string. The best way to do that in javascript is to use the current date/time stamp. For example:

    Code:
    var im = new Image(), imsrc = 'http//www.somedomain.com/images/some.jpg';
    im.onload = function(){
    	// do whatever you want/need here for the image's onload event
    }
    im.src = imsrc + '?bustcache=' + new Date().getTime();
    This will force the browser to fetch the image anew from the server because new Date().getTime(); will always be a unique number, a number that is larger than the last and all previous times.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    I don't think so. However, you can force the browser to make a fresh request by appending a unique query string. The best way to do that in javascript is to use the current date/time stamp. For example:

    Code:
    var im = new Image(), imsrc = 'http//www.somedomain.com/images/some.jpg';
    im.onload = function(){
    	// do whatever you want/need here for the image's onload event
    }
    im.src = imsrc + '?bustcache=' + new Date().getTime();
    This will force the browser to fetch the image anew from the server because new Date().getTime(); will always be a unique number, a number that is larger than the last and all previous times.
    Thank you, but this is exactly what I don't want to do as I've got many images and I want them to load quickly from cache.

    Only when a fresh image is loaded from the server I want to count this event.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you have to count on the server side, that would be a server side script, not a javascript. However, as long as the URL (highlighted) used here (from your first post):

    Code:
    image = new Image();
    image.src = "http://...";
    is to a cached image, the browser will use that cached image.

    The server may or may not see that as a request though, I really don't know that much about that in this particular situation. What server side language are you using? If it's PHP, the PHP forum here is pretty good, and may be able to answer that question, and the larger question of how to count when a file is requested and/or actually sent.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •