Menu
Is there a way to tell the browser to look down a list of image URLs until it finds one that works? Pure HTML would be preferred, but I'm guessing JavaScript is probably necessary here (I'm already using JQuery, so it's not an issue).
EDIT: Thanks for your answers! I'll add a few clarifications:
625
First, create the <div> tag as mentioned in the previous example and insert multiple images inside a common <div> tag so that all the images have a separate <div> tag and a class name.
The <img> tag has two required attributes: src - Specifies the path to the image. alt - Specifies an alternate text for the image.
This seems like a bad idea to me. 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">
Where the browser would try each file in succession. The problem with this approach is that it significantly increases the http traffic required and the latency. The best approach is to dynamically construct the page using the correct image tags ahead of time. Using a server-side approach you can try to load the image from the disk (or database or wherever the images are) and dynamically include the best url in the page's image tag.
If you insist on doing it client-side, you can try loading multiple 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 result in a page that appears to have lots of images but they disappear as the page loads. The alt="" is required to make Opera not show the broken image placeholder; the onerror is required for Chrome and IE.
If that's not spiffy enough, and if all your images are the same size, and that size is known, you could stack a bunch of images one on top of the other, so that the first image that loads hides all the others. This worked for me in Opera, FF, and IE8. It loads the last image in the list that exists. Note that this wastes bandwidth and memory because every 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 the 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
