2

here's the deal: I have a small onboard server on a project I'm working on, which is running kind of slow, so I thought moving images for the small website included, to external sources, like an external web server;

the problem is, I'm not sure I'll always be connected to the internet when I'll access it, maybe I'll only be in LAN.

So my question is: how can I specify a primary (external) and a secondary/backup (local) source for the images on the web page? so if the user is connected to the internet, this would take some load off the little server?

Thanks in advance, guys!

EDIT: I found the answer here: jQuery/JavaScript to replace broken images

-it's the onerror, with an inline javascript function that reassigns the image directly! (awesome stuff)

cheers, awesome guys from the internet that help people in need! ^^

Community
  • 1
  • 1
Andrei Chirtes
  • 43
  • 7
  • 2
    Are you sure it is faster to load images from the internet (if you have a connection) then from a local source? That doesn't sound too trivial, are you sure this is the solution to your actual problem (slowness)? (see http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem ) – Nanne Apr 19 '13 at 08:44
  • I'm sure; we're talking about a Digi ConnectMe 9210 onboard webserver; it's not that it's slow, but that it could become very slow with multiple clients connected, as right now it's running smooth because I'm the only one on it; however, transferring 530kb worth of graphics to each and every client that could connect is a bit much ... plus, this little guy will be connected to a 3G router in the final design, so that would tear up some not-so-cheap bandwidth pretty fast ... – Andrei Chirtes Apr 19 '13 at 08:49

4 Answers4

3

You have the onerror that can be called when loading fails:

<img onerror="runSomeScriptThatReplacesThisImage()" ...

or:

<img onerror="this.src='yourOtherImage.jpg" ...

Just be carefull because if the onerror also fails you'll get a loop. So be sure to avoid that.

fmsf
  • 36,317
  • 49
  • 147
  • 195
  • this sounds easy enough ... would you happen to know if it's a cross-browser solution, by any chance? – Andrei Chirtes Apr 19 '13 at 08:45
  • I'm just looking into it ... does it shoot when getting a 404 on a resource? – Andrei Chirtes Apr 19 '13 at 08:53
  • 1
    @AndreiChirtes I'm not sure, you need to test it. But I think that it also triggers the onerror if it is not found. – fmsf Apr 19 '13 at 09:01
  • I found this post that treats part of the problem I have, and it cuts through the browser-support issue : http://web.archive.org/web/20120904060007/http://lucassmith.name/2008/11/is-my-image-loaded.html – Andrei Chirtes Apr 19 '13 at 09:05
1

You're going to have two URL's for your images directory, e.g.

  1. //www.remote.com/images/
  2. ~/images/

when a session starts, you could do a request to the remote server and if the request times out or you don't get a 200 response back, you can use the local URL base. I would suggest storing it in a session variable for easy access.

Captain Kenpachi
  • 6,960
  • 7
  • 47
  • 68
  • thanks for the answer ... you got the basic idea, but what do I do the changing with? do I call a js function to wait for the 200 response? – Andrei Chirtes Apr 19 '13 at 08:46
  • 1
    I would suggest doing the call once per session and storing the result in the session or in a cookie. It's going to be much faster than waiting for an error each time you're trying to show an image. Store the URL base in the cookie and add it to your src="" via javascript or some server-side scripting. Whichever you prefer. – Captain Kenpachi Apr 19 '13 at 11:01
  • that's genious! THANK YOU! – Andrei Chirtes Apr 22 '13 at 10:18
1

This can be done without using any JavaScript.

The object element can be used to display images. If the referenced image (in the data attribute) can’t be loaded, the object’s fallback content will be used. Now, if you include another object, this one will be tried. The last one should include an alternative fallback content, e.g. text describing the image (similar to the alt attribute on img).

<object type="image/png" data="http://foo.example.com/external-image.png">
  <object type="image/png" data="/local-image.png">
    <!-- alternative text for the image (if even the local one cannot be loaded; for accessibility; etc.) -->
  </object>
</object>
unor
  • 92,415
  • 26
  • 211
  • 360
  • This looks awesome, I'm gonna test it! – Andrei Chirtes Apr 19 '13 at 09:45
  • Do you know if this is a cross-browser solution? how's the support with our friend, IE? ^^ – Andrei Chirtes Apr 19 '13 at 09:48
  • 1
    @AndreiChirtes: `object` itself [should be supported by almost all browsers](http://stackoverflow.com/a/2254084/1591669), but I guess the devil is in the details here, as how each browser implements it exactly. I don’t have any experience with it, sorry. – unor Apr 19 '13 at 10:29
  • np; I think I'm going to go for the img solution, as it's already been implemented in other projects across the web, so there's a bit more documentation for it; thanks a lot for your answer! ^^ – Andrei Chirtes Apr 22 '13 at 10:20
0

I think that your best option is to retrieve the images using AJAX.

Then you can fallback to retrieving them from the slow server it the fast server fails.

fredrik
  • 6,483
  • 3
  • 35
  • 45
  • why ajax? You can determine the connection serverside, so the descision to use ajax doens't come in there per se? check connection, if not select image_slow, if it is there select the fast image. This can be done with ajax sure, but it can also be done without it just the same. – Nanne Apr 19 '13 at 08:46
  • 1
    How do you know that the other server cannot be reached from the client even if the "slow" server cannot? Flawed reasoning. – fredrik Apr 19 '13 at 08:48
  • I actually prefer a client-side solution ... the reason for this is that the onboard server doesn't support any 'classical' server-side scripting, so basically what it does, is that it uses javascript and C files that were compiled to work as a semi-server-side solution ... it's a really messed up thing, but I have to work with what I have ... – Andrei Chirtes Apr 19 '13 at 08:52