We Keep Coding

check if multiple images loaded within certain timeinterval; if not then replace with other url

Problem- I am displaying some images on a page which are being served by some proxy server. In each page I am displaying 30 images ( 6 rows - 5 in each row). Here if due to overload or due to any other issue if proxy server could not able to server images( either all images or some of them) in 6 seconds then I want to replace unloaded image url with some other url using javascript so that I could display 30 images at the end.
What I tried is below.
objImg = new Image();
objImg.src = 'http://www.menucool.com/slider/prod/image-slider-4.jpg';
if(!objImg.complete)
{
alert('image not loaded');
}else{
img.src = 'http://www.menucool.com/slider/prod/image-slider-4.jpg';
}
I also tried with below code.
$('img[id^="picThumbImg_"]').each(function(){
if($(this).load()) {
//it will display loaded image id's to console
window.console.log($(this).attr('id'));
}
});
I could not use set time-out for each image because it will delay all page load.
I checked other similar question on stack-overflow but no solution worked me perfectly as I need to display multiple images.Please guide how to proceed.

You don't have to wait 6 seconds, or using TimeOut. You can check if the images are loaded or not using the onload Javascript/Jquery event. I know, it will take a little bit to dispatch the onerror event, let see:
Why don't use the load Jquery event on the window or the image itself?
$(window).load(function(){
//check each image
})
Disadvantage:
It will wait for other resources like scripts, stylesheets & flash, and not just images, which may or may not be OK to you.
If the image loads from the cache, some browsers may not fire off the event (included yours and that's why your code is not working)
Why don't use the error Jquery event on the image itself?
$('img[id^="picThumbImg_"]').error(function(){
//image loading error
})
Disadvantages:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Note:: Error is almost the same that the load event
Improving the code!:
$('img[id^="picThumbImg_"]').one('error', function() {
// image load error
}).each(function() {
if(!this.complete) $(this).error();
});
This will avoid few things of the previous code, but you still will have to wait if it's a 404 and you're replacing it in the onerror event, that will take a little bit right?
So, what now!
You can use this awesome plugin!. Once you add the reference, you just have to use something like:
var imgLoad = imagesLoaded('#img-container');
imgLoad.on( 'always', function() {
// detect which image is broken
for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
if(!imgLoad.images[i].isLoaded){
//changing the src
imgLoad.images[i].img.src = imgLoad.images[i].img.getAttribute("data-src2");
}
}
});
Your HTML markup should look like:
<div id="img-container">
<div class="row">
...
</div>
<div class="row">
<img src="original-path.jpg" data-src2="alternative-path.jpg">
...
</div>
<div class="row">
...
</div>
</div>
Note: You don't need jQuery in this case and this plugin is suggested by Paul Irish ;)

Give all your images a specific class. Loop through your images and use .load() to check if loaded, example below...
Detect image load

Webcomic Navigation Using Javascript?

I'm building my new webcomics home on my website and have ran smack into a wall.
Here's what I want and what I've tried.
I'm trying to have something where using JavaScript I can make only the image of the comic change so that I do not have to make a new page for every single image. I don't mind having to do extra coding work as long as I don't have hundreds of pages in my directory.
I was going to have a /First Next Prev Last/ kind of navigation but I've been so frustrated with it that I kind of scrapped that idea for now and instead am thinking of having a list of the names + link of each comic below the image and just put that into a scroll box. Kinda like how Perry Bible Fellowship works.
I've been trying to figure out if maybe an array is the way to go as I have around 30 images so far and I will be updating daily. Honestly I don't even know if Javascript is the way to go either.
I've also tried to implement [this code](http://interestingwebs.blogspot.com/2012/09/change-image-onclick-with-javascript.html
) to see if it would work and it just seems to break as soon as I try to plug in my own stuff into it. Here's an example of my javascript butcher job:
<script language="javascript">
function Drpepper()
{
document.getElementById("image").src = "/comics/1DrPepper.jpg";
}
function Applestore()
{
document.getElementById("image").src = "/comics/2Applestore.jpg";
}
</script>
<p>
<img alt="Dr Pepper" src="1DrPepper.jpg"
style="height: 85px; width: 198px" id="image" /></p>
<p>
<input id="Button1" type="button" value="Dr Pepper" onclick="DrPepper()"/>
<input id="Button2" type="button" value="Apple Store" onclick="Applestore()" /></p>
Is there anyway to expand this for my purposes? What I would like is to not have buttons and just use links but I can't seem to get beyond this part here where the image doesn't even load and the buttons do nothing.
Also if there is some better way of doing this using any other method other than JavaScript, I'm more than open to it, except the aforementioned making hundreds of pages.

First off, consider using jQuery if you're going to go the Javascript route. Here's an example I mocked up for you:
// set up an array of comic images
var imgs = [
'http://dustinland.com/dlands/dland.sxsw.jpg',
'http://dustinland.com/dlands/dland.hipster.jpg',
'http://dustinland.com/dlands/dland.legalize.marijuana.jpg',
'http://dustinland.com/dlands/dland.TLDR.jpg'
],
// initialize current to 0
current = 0;
// define a function that returns the next item in the imgs array,
// or the first if we're already at the last one
function next() {
current++;
if (current >= imgs.length) current = 0;
return imgs[current];
}
// define a function to do the opposite of next()
function prev() {
current--;
if (current < 0) current = imgs.length - 1;
return imgs[current];
}
// define the first image in terms of a jquery object
var comic = $('<img/>').attr('src', imgs[0]);
// append to DOM
$('#comics').append(comic);
// click the prev button, get the previous image
$('#prev').on('click', function(){
comic.attr('src', prev());
});
// click the next button, get the next image
$('#next').on('click', function(){
comic.attr('src', next());
});
See this in action here: http://jsfiddle.net/QzWV5/
This may work fine for your application, but maybe you should consider the advice of #icktoofay; using Javascript will mean, at the very least, that Google won't automatically crawl all your images. This also presents a usability problem: do you want to force your users to click through every comic in order to reach the first? It's probably best if every image were reachable via its own URL, that way, anyone who came across your comic on the web could easily link to an individual comic.
Have you considered using Tumblr, Blogger, or Wordpress?

delay images for display purposes not efficiency using javascript?

I have run into numerous sites that use a delay in loading images one after the other and am wondering how to do the same.
So i have a portfolio page with a number of images 3 rows of 4, what i want to happen is for the page to load,except for the images in img tags. Once the page has loaded i want images 1 of each row to load then say 0.5 seconds later the next image in the row(s) and so no. I'm going to have a loading gif in each image box prior to the actual image being displayed.
I know its doable but cant seem to find the term for doing this. This is purely for looks as it is a design site.
Thanks for the help.

This is very easy to do in jQuery
$('img').each(function(i) {
$(this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/Svs7p/3
For fading in rows one after the other in a table it just means changing the selector slightly. Remember to change from div to img -- I just used div for testing
$('tr').each(function(i) {
$('td div', this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/2Fg8S/

Here is what you can do, you can load the image tags with out the src and using a custom property:
<img alt='The image' path='image/path.jpg' />
then you can use javascript to load the images when the site is loaded or whenever you please;
// simplified
window.onload = function () {
var images = document.getElementsByTagName('img');
// loop and assign the correct
for (var i =0; i < images.length;i++){
var path = images[i].getAttribute('path');
images[i].src = path;
}
}
I hope you get the concept of how the images are delayed
**please note the path attribute is not a standard one.

The easiest way I can think to do this is to have a table set up that will eventually hold the image tags, but have none on load. Javascript can loop through an array of image urls, and insert those image tags into random locations on the table.
If you want to have the delay, setInterval is the perfect tool. http://www.w3schools.com/jsref/met_win_setinterval.asp
// You can hard-code your image url's here, or better still, write
// a server-side script that will read a directory and return them
// so it is fully dynamic and you can add images without changing code
unpickedImages = array();
// Start loading
loadAllImages = setInterval( insertImage, 600 );
function insertImage() {
if( unpickedImages.length > 0 ) {
var imageUrl = unpickedImages.shift();
// pick empty x, y on your table
// Insert the image tag im that <td></td>
} else {
clearInterval( loadAllImages );
}
}

You really don't need javascript to do this. If you specify the image sizes in the HTML or CSS, the browser will layout and display the page while loading the images, which will likely be loaded in parallel. It will then display them as soon as it can.
That way if users re-visit your site and have the images cached, they all show up immediately. If you have a script to load the images after a delay, you are making visitors wait for content unnecessarily and all their efforts to have a faster browser and pay for a fast internet connection has gone to waste.

How to go about writing a Javascript pre-loader?

I'm not talking about how to pre-load images using Javascript, I am thinking more along the lines of a Flash preloader which displays some sort of feedback while the SWF loads.
The site in question has heavy Javascript usage and requires many large images at page load so I wish to hide the site behind a loading screen till the initial images are all loaded.

I wrote a jQuery plugin called waitForImages that lets you do this.
The callbacks allow you to do whatever when each image has loaded...
$('body').waitForImages(
function() {
// Called when all images have loaded.
},
function(loaded, total, success) {
// Called once each individual image has loaded.
// `loaded` is the number of images loaded so far.
// `total` is the total number of images to load.
// `success` is `true` if the image loaded and `false` if the image failed to load.
// `this` points to the native DOM `img` element.
},
// Set the third argument to `true` if you'd like the plugin to look in the CSS
// for references to images.
true
);
jsFiddle.

I have one written when I first learned JavaScript. I'm going to try to find it in a second. The basic idea is to have a hidden element that's outside the page, and load your image in there.
Beware, ugly code as I wrote this when i started. Also it probably is not exactly what you're looking for, though there are good comments. Just modify it and make it a generic function. Based on jQuery, for a javascript gallery:
this.preload = function(){
/*
* Preloads all the image to a hidden div so the animation won't glitch.
*/
if (document.getElementById("preload")){ // Checks for existance.
var preload = document.getElementById("preload"); // Gets the preload div if it exists.
} else {
var preload = document.createElement("preload"); // Creates the preload div if it doesn't exist.
$(preload).attr("id", "preload");
}
for (var i=0; i<this.aNodes.length; i++){ // Get all the image links
var img = document.createElement("img"); // Loads all the image in a hidden div.
$(img).attr("src", this.aNodes[i].href);
preload.appendChild(img);
}
}

Javascript/JQuery: Gallery with very large images. How can I have it on click fade out, load the next image, and then fade in w/ the new image?

my boss has me working on a website that basically has a very large gallery right in the middle.
The way this one part needs to work is that the user clicks a next/prev button, the image fades out, displays a loading spinning image gif, and then fades in with the new image when it's down downloading. I have no idea where to even begin.
I know jquery somewhat, but I'm very new to actual javascript. My only reference book at hand is a copy of "Javascript for Dummies" for 1997. Is this of any use to me at all, or has Javascript changed since then?

There are lots of jQuery plugin for image gallery: Galleria, GalleryView, Pikachoose, and this one.
Or you can search from jQuery plugins page.

Please get a newer book, or just use the web as a resource, any info. from 1997 is going to be horribly outdated.
This is a very simple site I've recommended to beginners before: http://htmldog.com/guides/javascript/
No, it doesn't cover everything, but that's what's good about it, you'll get some key things down, and then be able to search on google for more specific stuff.
To give you some barebones ot start with, I would do something like this:
$(document).ready(function() {
$('#nextBtn').click(function() {
transitionToNextImage ();
});
});
transitionToNextImage = function() {
$('img.active-image').fadeTo(1000,0), function() {
// fade out complete.
$('#inProgressGif').show();
getNextImage();
});
};
getNextImage = function() {
// make ajax call to get new image, and
// in the success callback of the ajax call,
// remove the inProgressGif, and
// add the image ot the DOM with opacity 0,
// then slowly fade it in to opacity 1 (opposite
// of what was done above
};