PDA

View Full Version : لود شدن تصاویر پس از اسکرول خوردن صفحه


computer-mag
پنج شنبه 27 مرداد 1390, 11:26 صبح
سلام دوستان
اگر دقت کرده باشید وقتی در سایتی مثل فیس بوک داریم عکسهای یک آلبوم تصویری رو مشاهده میکنیم به طور پیشفرض فقط تصاویری که در حال حاضر در محیط صفحه نمایش قایل رویت هستند لود شده و مابقی تصاویر وقتی که صفحه رو اسکرول می کنیم و در صفحه نمایش پیدا میشوند لود میشن م یخواستم ببینم چجوری باید همچین کاری رو انجام داد ممونم سرچ هم کردم چیز خاصی یافت نشد شایدم بد سرچ کردم من!
amin1softco
پنج شنبه 27 مرداد 1390, 13:40 عصر
http://www.appelsiini.net/projects/lazyload
computer-mag
پنج شنبه 27 مرداد 1390, 14:18 عصر
http://www.appelsiini.net/projects/lazyload

ممنونم جالب بود ولی من شیوه درستاتفادشو با اینکه مثالم زده نفهمیدم که دقیقا باید چجوری ازش استفاده کرد که اون حالتی که تو پست اولم گفتم ایجاد بشه
amin1softco
پنج شنبه 27 مرداد 1390, 16:14 عصر
کار خاصی نباید بکنی که فقط تو هد صفحه اینا رو بنویس


<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>

خیلی خوشگل با فید تصویر لود می شه
masoudies
دوشنبه 07 آذر 1390, 14:31 عصر
سلام
خسته نباشید.
من از این استفاده کردم فقط یه سوال داشتم. این تصاویر رو به ترتیب لود میکنه. مثلا فرض کنید 10 تا تصویر زیر هم باشه، به ترتیب وقتی اسکرول میشه از بالا به پایین لود میکنه تا اینجا مشکلی نیست.
اما مشکل من اینه که تصاویرم به صورت ستونی در Div ها قرار گرفته اند، یعنی اولین ستون مثلا تصاویر گل هست که 10 تا عکس زیر هم قرار داره و وقتی اسکرول میشه به خوبی ستون اول لود میشه اما ستون دوم به دلیل اینکه کدهاش زیر کدهای ستون اول هست، به هیچ وجه لود نمیشه. آیا روشی هست که بشه این مشکل رو برطرف کرد؟

تشکر
Saber Mogaddas
دوشنبه 07 آذر 1390, 16:31 عصر
سلام
پلاگین lazy به این صورت عمل می کنه هر عکسی که کلاس .lazy بدید هروقت سکرول به اون عکس با این کلاس رسید load و نمایش داده میشه..
masoudies
دوشنبه 07 آذر 1390, 20:08 عصر
سلام
کارش رو میدونم
اینطوری بگم بهتره. اما مشکل من اینه که سه تا Div دارم به صورت عمودی. توی هر ستون 20 تا تصویر هست. خب حالا مسلما توی کدهاش که نگاه بکنیم بسته به برنامه نویسی کدهای ستون اول(و تصاویرش) اول و ستون دوم کدهاش بعد از ستون اول و همینطور ستون سوم کدهاش بعد از ستون دوم هست.
مشکل من اینه که حالا وقتی lazy رو برای این استفاده میکنم تنها ستون اولی که کدهاش هم اول هست رو لود میکنه و دو ستون دیگه لود نمیشه.
مشکل چیه؟

تشکر
Saber Mogaddas
دوشنبه 07 آذر 1390, 20:20 عصر
کدت رو کامل بده با همه فایل هایی که به پروژت وصل هستن..
masoudies
دوشنبه 07 آذر 1390, 20:47 عصر
تشکر از شما

اوکی شد.
Saber Mogaddas
سه شنبه 08 آذر 1390, 10:43 صبح
من به مثال شما نگاه کردم ..عکسها با scroll نمایش داده می شن در ست کار می کنه!
masoudies
سه شنبه 08 آذر 1390, 10:50 صبح
ببینید اگه دقت بکنید دو تا ستون هست. ستون اول با اسکرول لود میشه، اما حواستون باشه به ستون دوم که بعد از لود شدن ستون اول اود میشه؟
یه بار اسکرول پایین کنید ببینید که اول ردیف اول لود نمیشه.
Saber Mogaddas
سه شنبه 08 آذر 1390, 13:04 عصر
سلام
load نمی شه چون چیزی به اسم karimi.jpg داخل پوشه عکست نیست..
درست کار میکنه و با SCROLL همه عکس ها load می شن عزیز..
فایل زیر رو باز کن..
78506

موفق باشی
masoudies
سه شنبه 08 آذر 1390, 13:27 عصر
ببین حاجی مشکل من این نیست که!
شما وقتی صفحه index.html رو باز میکنید بدون اینکه اسکرول بکنید باید تصاویری که اونجا هستند لود بشه. ستون اول لود میشه چرا ستون دوم لود نمیشه؟ مگر اینکه اسکرول پایین بکنید.
اینجا زیاد مشخص نیست ولی وقتی 20 تا عکس تو یه ستون باشه اصلا لود نیمشه.
یه بار دیگه ببینید.
Saber Mogaddas
سه شنبه 08 آذر 1390, 15:43 عصر
من تست زدم مشکلی نداشت همش load شد..شاید browseret مشکل داره cookie رو خالی کن ..اگه نه پس یه فایلی بده که اون مشکل پیش بیاد..چون این مشکلی نداشت همه عکس ها load شد با اسکرول عکس های پایینم load شد..
masoudies
سه شنبه 08 آذر 1390, 21:13 عصر
78530

اینو ببینید... توجه به لود ستون سمت چپ داشته باشید.
Saber Mogaddas
چهارشنبه 09 آذر 1390, 10:55 صبح
درسته..به صورا ردیفی عمل میکنه..میتونید کدهارو به این صورت تغییر بدید یعنی سطری..تست زدم درست کار میکنه..


<!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>
masoudies
چهارشنبه 09 آذر 1390, 11:09 صبح
نه من نمیخوام سطری باشه.
کاری نمیشه کرد براش؟
Saber Mogaddas
چهارشنبه 09 آذر 1390, 19:31 عصر
سلام
متاسفانه من هر راهی رو امتحان کردم جواب نداد..!!
نیست به صورت ردیفی از عکس بالا شروع میکنه..بخاطر اون نمی شه ولی سطری که میچینی درسته..!
hamid.shekasteh
پنج شنبه 10 آذر 1390, 08:44 صبح
سلام

پارامتر failurelimit رو تنظیم کنید.


موفق باشین.
masoudies
پنج شنبه 10 آذر 1390, 16:20 عصر
سلام
تشکر از شما خیلی ممنون درست شد.
کار failurelimit چیه؟ دقیقترش رو از کجا میتونم یاد بگیرم؟

یه سوال دیگه. یکی از دوستان میگفتند که این کد تمام تصاویر رو ابتدا لود میکنه!!! واقعا اینطوریه؟ من توی سایت تست کردم فکر کنم اینطور نبود که تصاویر لود بشوند.
تشکر
hamid.shekasteh
شنبه 12 آذر 1390, 00:12 صبح
سلام، خواهش می کنم.



کار چیه؟ دقیقترش رو از کجا میتونم یاد بگیرم؟

http://www.appelsiini.net/projects/lazyload
همونطور که در لینک بالا می بینید پاراگراف یکی مونده به آخر در مورد failurelimit توضیح داده.
When images are not sequential
وقتی عکس ها به ترتیب نیستند.حالت مورد نظر شما.



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

نه نگران نباشید.هم از ظاهر کار پیداست هم اینکه با Web Developer Tool مربوط به chrome تست کردم صحیح کار می کنه و با تاخیر بارگذاری انجام میشه.

موفق باشین.