لود شدن تصاویر پس از اسکرول خوردن صفحه
سلام دوستان
اگر دقت کرده باشید وقتی در سایتی مثل فیس بوک داریم عکسهای یک آلبوم تصویری رو مشاهده میکنیم به طور پیشفرض فقط تصاویری که در حال حاضر در محیط صفحه نمایش قایل رویت هستند لود شده و مابقی تصاویر وقتی که صفحه رو اسکرول می کنیم و در صفحه نمایش پیدا میشوند لود میشن م یخواستم ببینم چجوری باید همچین کاری رو انجام داد ممونم سرچ هم کردم چیز خاصی یافت نشد شایدم بد سرچ کردم من!
ممنونم جالب بود ولی من شیوه درستاتفادشو با اینکه مثالم زده نفهمیدم که دقیقا باید چجوری ازش استفاده کرد که اون حالتی که تو پست اولم گفتم ایجاد بشهنوشته شده توسط amin1softco
کار خاصی نباید بکنی که فقط تو هد صفحه اینا رو بنویس
خیلی خوشگل با فید تصویر لود می شهکد HTML:<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); }); </script> </head>
سلام
خسته نباشید.
من از این استفاده کردم فقط یه سوال داشتم. این تصاویر رو به ترتیب لود میکنه. مثلا فرض کنید 10 تا تصویر زیر هم باشه، به ترتیب وقتی اسکرول میشه از بالا به پایین لود میکنه تا اینجا مشکلی نیست.
اما مشکل من اینه که تصاویرم به صورت ستونی در Div ها قرار گرفته اند، یعنی اولین ستون مثلا تصاویر گل هست که 10 تا عکس زیر هم قرار داره و وقتی اسکرول میشه به خوبی ستون اول لود میشه اما ستون دوم به دلیل اینکه کدهاش زیر کدهای ستون اول هست، به هیچ وجه لود نمیشه. آیا روشی هست که بشه این مشکل رو برطرف کرد؟
تشکر
سلام
پلاگین lazy به این صورت عمل می کنه هر عکسی که کلاس .lazy بدید هروقت سکرول به اون عکس با این کلاس رسید load و نمایش داده میشه..
سلام
کارش رو میدونم
اینطوری بگم بهتره. اما مشکل من اینه که سه تا Div دارم به صورت عمودی. توی هر ستون 20 تا تصویر هست. خب حالا مسلما توی کدهاش که نگاه بکنیم بسته به برنامه نویسی کدهای ستون اول(و تصاویرش) اول و ستون دوم کدهاش بعد از ستون اول و همینطور ستون سوم کدهاش بعد از ستون دوم هست.
مشکل من اینه که حالا وقتی lazy رو برای این استفاده میکنم تنها ستون اولی که کدهاش هم اول هست رو لود میکنه و دو ستون دیگه لود نمیشه.
مشکل چیه؟
تشکر
آخرین ویرایش به وسیله masoudies : چهارشنبه 29 آبان 1392 در 05:12 صبح
کدت رو کامل بده با همه فایل هایی که به پروژت وصل هستن..
تشکر از شما
اوکی شد.
آخرین ویرایش به وسیله masoudies : چهارشنبه 29 آبان 1392 در 05:13 صبح
من به مثال شما نگاه کردم ..عکسها با scroll نمایش داده می شن در ست کار می کنه!
ببینید اگه دقت بکنید دو تا ستون هست. ستون اول با اسکرول لود میشه، اما حواستون باشه به ستون دوم که بعد از لود شدن ستون اول اود میشه؟
یه بار اسکرول پایین کنید ببینید که اول ردیف اول لود نمیشه.
سلام
load نمی شه چون چیزی به اسم karimi.jpg داخل پوشه عکست نیست..
درست کار میکنه و با SCROLL همه عکس ها load می شن عزیز..
فایل زیر رو باز کن..
lazy.zip
موفق باشی
ببین حاجی مشکل من این نیست که!
شما وقتی صفحه index.html رو باز میکنید بدون اینکه اسکرول بکنید باید تصاویری که اونجا هستند لود بشه. ستون اول لود میشه چرا ستون دوم لود نمیشه؟ مگر اینکه اسکرول پایین بکنید.
اینجا زیاد مشخص نیست ولی وقتی 20 تا عکس تو یه ستون باشه اصلا لود نیمشه.
یه بار دیگه ببینید.
من تست زدم مشکلی نداشت همش load شد..شاید browseret مشکل داره cookie رو خالی کن ..اگه نه پس یه فایلی بده که اون مشکل پیش بیاد..چون این مشکلی نداشت همه عکس ها load شد با اسکرول عکس های پایینم load شد..
lazy.rar
اینو ببینید... توجه به لود ستون سمت چپ داشته باشید.
درسته..به صورا ردیفی عمل میکنه..میتونید کدهارو به این صورت تغییر بدید یعنی سطری..تست زدم درست کار میکنه..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
</head>
<body>
<div style="float:right; width:100%;">
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/akbari.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/arzi.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/bahmani.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/kafi.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/1.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/2.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/3.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block; float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/4.jpg" > </div>
</div>
<div style="float:right; width:100%;">
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/alimi.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/banifateme.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/haddadian.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/helali.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/5.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/6.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/7.jpg" > </div>
<div style="margin:0 auto; width:400px; height:300px; display:block;float:right;"> <img class="lazy" src="img/grey.gif" data-original="img/pix/maddah/8.jpg" > </div>
</div>
<script type="text/javascript">
$("img.lazy").lazyload({
effect : "fadeIn"
});
</script>
</body>
</html>
نه من نمیخوام سطری باشه.
کاری نمیشه کرد براش؟
سلام
متاسفانه من هر راهی رو امتحان کردم جواب نداد..!!
نیست به صورت ردیفی از عکس بالا شروع میکنه..بخاطر اون نمی شه ولی سطری که میچینی درسته..!
سلام
پارامتر failurelimit رو تنظیم کنید.
موفق باشین.
سلام
تشکر از شما خیلی ممنون درست شد.
کار failurelimit چیه؟ دقیقترش رو از کجا میتونم یاد بگیرم؟
یه سوال دیگه. یکی از دوستان میگفتند که این کد تمام تصاویر رو ابتدا لود میکنه!!! واقعا اینطوریه؟ من توی سایت تست کردم فکر کنم اینطور نبود که تصاویر لود بشوند.
تشکر
آخرین ویرایش به وسیله masoudies : پنج شنبه 10 آذر 1390 در 18:23 عصر
سلام، خواهش می کنم.
http://www.appelsiini.net/projects/lazyloadکار چیه؟ دقیقترش رو از کجا میتونم یاد بگیرم؟
همونطور که در لینک بالا می بینید پاراگراف یکی مونده به آخر در مورد failurelimit توضیح داده.
When images are not sequential
وقتی عکس ها به ترتیب نیستند.حالت مورد نظر شما.
نه نگران نباشید.هم از ظاهر کار پیداست هم اینکه با Web Developer Tool مربوط به chrome تست کردم صحیح کار می کنه و با تاخیر بارگذاری انجام میشه.یه سوال دیگه. یکی از دوستان میگفتند که این کد تمام تصاویر رو ابتدا لود میکنه!!! واقعا اینطوریه؟ من توی سایت تست کردم فکر کنم اینطور نبود که تصاویر لود بشوند.
موفق باشین.
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول