Welcome to the
MudCorp® Corporate Website


Thursday March 30, 2023.

MudCorp is the studio of Takashi Okamoto specializing in graphic design, web design, technology art and software & hardware implementation. Our services include website designing and programming, custom e-commerce and content management systems, hardware and software solutions for interactive kiosks, signage design for electronic displays, technology consulting and any other project that involves both design and technology.
For new business inquires or If you want to say hello, please use the contact form to send me a message. I will respond as soon as possible.
Takashi Okamoto is a graphic designer, programmer and technology artist living and working in North America. His illustrations have appeared in magazines and newspapers including: The New York Times, The National Post and Shift Magazine. As a graphic designer, he has worked with studios including 2x4, Stiletto, Village and artists Ben Rubin and Natalie Jeremijenko. His technology based art has been exhibited in Canada and Mexico. He holds a (Hons) BSc in astrophysics from the University of Toronto, a MFA in graphic design from Yale University and a SM from the MIT Media Lab, where he studied under Professor John Maeda in the Physical Language Workshop. Currently, he is a partner at BuzaMoto.

space

MudCorpcanada
Copyright Takashi Okamoto. Contact.

——————
Please complete the following form.

 

Force Image Reload with PHP and JavaScript Solutions
Takashi Okamoto (09/02/05)


There are times when you want to ask the client's browser to use the newest version of an image off the webserver. For instance, you have a CMS system that enables a user to upload and replace an image. If the new image has the same filename as the previous, you will need to ask the user to force-refresh their browser in order to see the new image when you refer them to a confirmation page. I ran across this problem while writing mudTyper, originally for thirstype, now Village, since it required me to force the client to download the newest image from the server triggered by key events. There are various meta tags you can use, but many browsers still (annoyingly) insist on using the cached version of an image. We can use PHP or JavaScript for a guaranteed solution.

The solution is a straight forward one-liner. We append a query to the URL of the image being referenced. Suppose you have an image: /images/test.jpg you will instead reference it as: /images/test.jpg?123 or /images/test.jpg?aQuery. Appending a query to the URL does not affect the image in any way, except that the browser thinks /images/test.jpg?1, /images/test.jpg?2 and /images/test.jpg?3 are all different. Numbers work well as the query since you can easily generate a random number to append to the URL before the page is rendered by the browser. Below I provide an equivalent solution using PHP and JavaScript, respectively.

The PHP Solution: (I prefer this one)

<html> <head> <title>Force Image Reload using PHP</title> </head> <body> <img src="/images/test.jpg?<?php=rand(0, 100)?>" alt="image"> </body> </html>

The JavaScript Solution:

<html> <head> <title>Force Image Reload using JS</title> </head> <body> <script language="JavaScript" type="text/javascript"> document.write('<img src="/images/test.jpg?' + Math.floor(Math.random()*100) + '" alt="image">'); </script> </body> </html>

Of course you do similar things with Perl, jsp, asp or whatever else you are using.