lazy loading

[deam0n]

Опитвам се да пресъздам ефект като lazy loading


[js] $(document).ready(function(){
/* всеки път когата се скролва надоло ... */
$(window).scroll( function(){

/* проверяване на позицията на всеки елемент */
$('.hidden').each( function(i){

var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();

/* ако е скролнато то обекта да му се променя opacity */
if( bottom_of_window > bottom_of_object ){

$(this).delay(200).animate({'opacity':'1'},2000);
}

});

});
}); [/js]

Проблема идва от там, че ако не се показват елементите все скрола на страницата седи така все едно тези елементи са показани..

Задавам на .hidden - display: none; за да премахна показването на скрола и всичко е наред.. Обаче когато променя с JS display на inline това афектира всички обекти с клас hidden и се показват всичките при единичен скрол..



[js] $(document).ready(function(){
/* всеки път когата се скролва надоло ... */
$(window).scroll( function(){

/* проверяване на позицията на всеки елемент */
$('.hidden').each( function(i){

var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();

/* ако е скролнато то обекта да му се променя opacity */
if( bottom_of_window > bottom_of_object ){

// промяна на display на inline
$(this).delay(200).css('display', 'inline');
$(this).delay(200).animate({'opacity':'1'},2000);
}

});

});
});[/js]

 

[deam0n]

Оо измислих го.. В CSS файла задавам height: 0px; и min-height: 0px и след това в скрипа

[js] $(this).delay(100).css('height', 'auto');
$(this).delay(200).css('min-height', '48px'); [/js]


и целия скрипт става
[js] $(document).ready(function(){
// LAZY LOADING
/* Every time the window is scrolled ... */
$(window).scroll( function(){

/* Check the location of each desired element */
$('.hidden').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();

/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).delay(100).css('height', 'auto');
$(this).delay(200).css('min-height', '48px');
$(this).delay(200).animate({'opacity':'1'},2000);
}

});

});
});[/js]

а в CSS

[css].hidden {
height: 0px;
min-height: 0px;
opacity: 0;
}
[/css]

 

[Hous]

Не знам защо го пресъздаваш като го имаш на готово,а и със Min стойността ще има проблеми във beloved IE