Hey all,
First post to the group! I am trying to display a spinner on images
that are loading, which works. I wanted the loader to be degrade
properly if javascript was disabled, which is why i replace the image
with the loading div and then reinsert the image.
The problem with that is that on fast connections, the image actually
loads, then i delete it, and replace it with a loading div, and then
reinsert the image after it reloads.. which doesnt look so nice.
So.. I tried creating a hash table of loaded images using this snippet
below inside of $(document).ready(fn):
jQuery(this).load(function(){
loadedImages[originalImageSource] = true;
alert(originalImageSource);
});
but it never gets called?
Any ideas what I am doing wrong?
Appreciate the response, my full code is below!
- Bryan
-------------------------------------
if( typeof( EXPLOREMARK_BLOG ) === 'undefined') {
EXPLOREMARK_BLOG = {};
}
EXPLOREMARK_BLOG = {
setup: function() {
jQuery(document).ready( function() {
//***Start Post Image Pagination
var postImagePagination =
jQuery('.postImagePagination
ul.pagination li a');
var loadedImages = {};
//unhide all the hidden paginations
jQuery('div.postImagePagination
ul.pagination').css
('display','block');
jQuery('div.postImagePagination ul.images li
img').each(function()
{
var originalImageSource =
jQuery(this).attr('src');
var img = new Image();
var parent = jQuery(this).parent();
var width = jQuery(this).width();
var height = jQuery(this).height();
jQuery(this).load(function(){
loadedImages[originalImageSource] = true;
alert(originalImageSource);
});
if
(typeof(loadedImages[originalImageSource]) === 'undefined') {
jQuery(this).after('<div
class="loading"></div>').remove();
jQuery(img).load(function(){
jQuery(this).css('display', 'none'); // .hide() doesn't work in
Safari when the element isn't on the DOM already
parent.append(this);
parent.children().eq(0).remove();
jQuery(this).fadeIn();
}).error(function(){
// notify the user that the
image could not be loaded
}).attr('src',
originalImageSource);
} else {
alert('loaded already ' +
originalImageSource);
}
});
//if a .pagination link is clicked,
//show the previous li with the same number as
the current li
inside of the current postImagePag
postImagePagination.click( function() {
//select li children of the grandparent
ul of the current clicked
a href
var currentPaginationList =
jQuery(this).closest('ul').children
();
//index of current li
var index =
currentPaginationList.index(jQuery(this).parent());
//select the ul.images of the current
.postImagePagination div
var currentImageList =
jQuery(this).closest
('.postImagePagination').find('ul.images li');
//set all images inactive
currentImageList.removeClass('active').addClass('inactive');
//set the image with the same index of
the li to active
currentImageList.eq(index).removeClass('inactive').addClass
('active');
//remove the activeLink class from all
a href elements in the
current pagination list
jQuery(this).closest('ul').find('li
a').removeClass
('activeLink');
//add activeLink class to the current
clicked link
jQuery(this).addClass('activeLink');
});
//***End Post Image Pagination
});
}()
};
