Hi all
I am trying to do something similar with Prototype as compared to this
snippet of code down below:
$(function() {
$('div#main').html('<img src="shared/images/ajax-loader.gif"
width="100" height="100" alt="Ajax Loader" />');
var counter = 0;
var links = $('div#thumbs a').each(function() {
console.log(links.size());
$('<img />')
.bind('load error', function() {
if (++counter == links.size()) {
$('div#main').html('<img
src="'+links.eq(0).attr('href')+'" /
>');
}
})
.attr('src', $(this).attr('href'));
}).click(function(event) {
event.preventDefault();
$('div#main').html('<img src="' + $(this).attr('href')
+ '" />"');
});
});
I definitely want to try and make it a little more readable and clear
as to what's going on.
The idea is, all the linked images pre-load while showing an animated
gif. Then, once the images are finished loading, you can click for a
standard js image swap. I am struggling just to get the pre-loading
portion working though. Here's what I was tinkering with:
document.observe("dom:loaded", function() {
$('main').update('<img src="shared/images/ajax-loader.gif"
width="100" height="100" alt="Ajax Loader">');
var counter = 0;
var links = $$("div#photos a");
links.each(function(link) {
var img = new Element('img').observe("load",function() {
if (++counter == links.size()) {
$('main').update('images loaded');
}
}).writeAttribute('src', link);
});
});
Any suggestions? thanks in advance!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
