Re: iMDb – Personal Movies Database webapp – test drive

[cparliaros]

I have decide that I dont like the loadMoreMovies as scroll down functionality inside the code for many reason but the most important was that when I am searching the library I want all the movies to be there as in itunes.

I created a backup copy and I start rebuilding the code from the top, I will keep most of the old function but as I want to take out this functionality I have to put one by one the rest functions back and make sure that everything works.

So I got out the scroll load but I created a new fuctionality. Now when you load the page, all the movie-elements append inside the movies-cointainer but without images. Then only the elements inside the window will load their images and as you scroll down more images will load. This way I keep the speed boost from the old function as the loading of the images was the main problem. I have the code of the new function, works fine but I am wondreing if it is possible to be more simple or efficient:


loadCovers(); // initial load

function loadCovers() {
//for each element/movie
$(".element").each(function(){
// if element inside the window and if has no cover already
if ( $(this).position().top < $('#main-container').scrollTop() + $(window).height() ) {
if ( $(this).children('.cover').children().length == 0 ) {
var id = $(this).attr('id'); //get its id and use it to load the image
$(this).children('.cover').append('');
$('.cover img').load(function() { $(this).css("opacity","1"); });
}
// when reach the first element out of the window break the forloop
} else { return false; }
});
}

$('#main-container').scroll(function() {
loadCovers();
});


EDIT:
[jsfiddle](http://jsfiddle.net/cparliaros/7QmWr/1/ “”)