lazy load بدون اسکرول (نیاز به راهنمایی)

[dexted]

سلام خدمت دوستان و اساتید

مطمئنا با تکنیک lazy load آشنا هستین :تکنیکی هست که مثلا وقتی ما توی یک سایت تعداد زیادی عکس حجیم داره از لود شدن عکس ها تا وقتی صفحه نمایش کاربر روی عکس نرفته جلوگیری می کنه.

به این صورت مرسوم هست که مثلا این عکس ها توسط Ajax لود میشن و برای اینکه بار زیادی یکدفعه روی سرور نیاد هر موقع که کاربر رفت روی عکس عکس شروع به لود می کنه .

حالا من میخام بدونم راهی هست که اولا به جای اسکرول اینطور باشه که مثلا اون قسمتی که عکس ها هست هر موقع visible شد (به طور پیش فرض display:none هست) عکس های توش لود بشه
و دوما اینکه عکس ها با ajax لود نشن به عبارت دیگه ما یکسری عکس داریم توی یک div که display اون div به طور پیش فرض none هست و حالا هر موقع display اون block شد عکس های توش لود بشن
امیدوارم رسونده باشم منظورمو
این هم یه لینک هست از آموزش با اسکرولش : http://cflove.org/2010/09/how-to-build-a-lazyload-ondemand-load-with-jquery.cfm

اگر اساتید و دوستان یه کمکی بدن به من ممنون میشم خیلی

 

[silverboy65]

خوب صفحه تا اسکرول نشه ، که بخش های جدید نمایش داده نمیشه که !!!

 

[dexted]

دوست عزیز منظورم از نمایش لود شدنش هست
نه اینکه ما ببینیمش.میخام تا صفحه اسکرول نشده لود نشن عکس ها

 

[dexted]

از اساتید و دوستان کسی نیست راهنمایی کنه منو؟

 

[silverboy65]

ببیند ، برای اینکه متوجه بشید کار بر کجا صفحه رو داره می بینه ، راهش اینه که Scroll رو در نظر بگیرید و از این event استفاده کنید

همین آموزشی هم که گذاشتید خیلی خوبه ، ;کلیتش اینجوری میشه

function test()
{
    var scllwidth = $(window).scrollTop() + $(window).height()
    $('img.test').each(function(){
        var position = $(this).offset().top;
        if ( scllwidth > position) {
              $(this).animate({
                  opacity : 1
              }, 400).removeClass('test');

            }
    })
}
$(window).scroll( function() { test() } )

به کلاس test استایل opacity : 0 رو بده ، و عکس هایی که این می خوای این قابلیت رو داشته باشند بهشون کلاس test رو بده

البته این راه فکر کنم رم زیادی مصرف می کنه شاید راه بهتری هم باشه
پیدا کردی به ما هم بگو