Is there a way to assign multiple image sources in HTML / JavaScript?
Is there a way to tell the browser to go through the list of image urls until it finds one that works? Pure HTML would be preferred, but I'm guessing JavaScript is probably needed here (I'm already using JQuery so this isn't a problem).
EDIT: Thanks for your answers! I'll add some clarification:
- By "works" I mean that the image can be displayed.
- I specifically want to do this on the client side.
source to share
I think this is a bad idea. What is the purpose of this feature? It sounds like you want something equivalent to this:
<img src="/images/file1.jpg" src2="/images/file2.jpg" src3="/images/file3.jpg">
If the browser will try each file sequentially. The problem with this approach is that it significantly increases the required http traffic and latency. The best approach is to dynamically build the page using the correct image tags ahead of time. Using a server side approach, you can try loading the image from disk (or database or wherever there are images) and dynamically include the best url in the page image tag.
If you insist on doing this on the client side, you can try loading a few image tags:
<img src="file1.jpg" alt="" onerror="this.style.display='none'">
<img src="file2.jpg" alt="" onerror="this.style.display='none'">
<img src="file3.jpg" alt="" onerror="this.style.display='none'">
<img src="file4.jpg" alt="" onerror="this.style.display='none'">
<img src="file5.jpg" alt="" onerror="this.style.display='none'">
<img src="file6.jpg" alt="" onerror="this.style.display='none'">
This will cause a lot of images to appear on the page, but they will disappear on page load. alt=""
requires Opera to not show the split image space; onerror
required for Chrome and IE.
If that's not strong enough, and if all your images are the same size and that size is known, you can stack a bunch of images one on top of the other so that the first image loaded hides all the others.This worked for me in Opera, FF, and IE8. It loads the last image into the list that exists. Note that this decreases bandwidth and memory as each image is loaded.
<div style="width: 50px; height:38px; background-image: url(file1.jpg);">
<div style="width: 50px; height:38px; background-image: url(file2.jpg);">
<div style="width: 50px; height:38px; background-image: url(file3.jpg);">
<div style="width: 50px; height:38px; background-image: url(file4.jpg);">
<div style="width: 50px; height:38px; background-image: url(file5.jpg);">
<div style="width: 50px; height:38px; background-image: url(file6.jpg);">
<div style="width: 50px; height:38px; background-image: url(file7.jpg);">
</div></div></div></div></div></div>
Finally, there is a JavaScript approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var image_array = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg', 'file5.jpg','file6.jpg' ];
function load_img(imgId, image, images, index) {
image.onerror = function() {
load_img(imgId, this, images, index+1);
};
image.onload = function() {
var element = document.getElementById(imgId);
if (element) {
element.src = this.src;
element.style.display = 'block';
}
};
image.src = images[index];
}
</script>
</head>
<body>
<img id="id_1" alt="" style="display: none;">
</body>
<script>
load_img('id_1', new Image(), image_array, 0);
</script>
</html>
source to share
If I am reading the spec correctly, you should be able to do it with HTML object
element . Tags <object>
can be nested and thus provide a chain of resources that will each be checked in turn to be rendered, and on failure, the user agent continues with the next one.
Please note that this behavior is / was a bug across multiple browsers and versions.
source to share
Assuming you mean that the browser can receive some content with an HTTP 200 response code for a specific URL, then the answer would be: NO from the client side, using only HTML.
In other words, you cannot have an element (like img) and provide multiple urls for "try".
You can of course create something on the server side: the request comes in for resource X, and the server has a list of URLs that "work".
source to share
INAJNBAM (I am by no means a Javascript ninja), but in pseudocode , maybe try something like this after loading the page: (OR, now that I think about it, this works well with PHP too)
$images = array('img1.jpg', 'img2.jpg', 'img3.png'....)
foreach $images as $img
{if $img.height > 0px
{print "<img src="$img" />"
end}
};;;;
PHP is actually going to be even better because I am assuming that in JS this will cause images to flash on screen at the end of the pageload. Try it in PHP and see if something similar suits your account.
NOTE . I added 4 half columns at the end. I know Javascript always wants them, I just didn't know where to hold them.
source to share
If by saying "works" you mean that the image can be loaded, you can use the "load" function on the image (in your case a bunch of images) jQuery and within it declare functionality that will fire after the image has finished loading.
If by saying "works" you mean the HTTP status code is ok, then use the ajax call with jquery.
function getUrlStatus(url) {
$.ajax({
url: url,
complete: function(xhr) {
return xhr.status;
}
});
}
source to share
You can enter the url of some server application / script that serves the image from any image source it can find.
You can do this in ASP.Net using an HTTPHandler that sends a response like content = image / jpg.
Besides ASP.Net, there are other server side options such as Perl, PHP ...
source to share