Ghasem Paran

لود تصاویر با scroll شدن صفحه

19 پست در این موضوع قرار دارد

سلام

چطوری میشه کاری کرد که تصاویر مثل این سایت نمایش داده بشن ؟


http://demo.tempfa.org/multinews

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

ممنون

0

به اشتراک گذاری این پست


لینک به پست

با تکنولوژی Lazy Load سرچ کنید!

4

به اشتراک گذاری این پست


لینک به پست

به وسیله جی کوئری


$(document).ready(function() {
$(window).scroll(function() {
$("img").each(function() {
var data = $(this).attr("data-img");
var src = "http://yoursite.com/loading.gif";
var offset = $(this).offset();
var scroll = $(window).scrollTop();
if (scroll >= offset.top) {
$(this).attr("src", data);
} else
{
$(this).attr("src", src);
}
});
});
})

و تصاویر باید به صورت


<img src="http://yoursite.com/loading.gif" data-img="http://yoursite.com/image.jpg">

قرار بگیرند یعنی همه تصاویر فایل لودینگ را نمایش بدهند و نشانی اصلی تصویر در data-img باشد

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

به وسیله جی کوئری


$(document).ready(function() {
$(window).scroll(function() {
$("img").each(function() {
var data = $(this).attr("data-img");
var src = "http://yoursite.com/loading.gif";
var offset = $(this).offset();
var scroll = $(window).scrollTop();
if (scroll >= offset.top) {
$(this).attr("src", data);
} else
{
$(this).attr("src", src);
}
});
});
})

و تصاویر باید به صورت


<img src="http://yoursite.com/loading.gif" data-img="http://yoursite.com/image.jpg">

قرار بگیرند یعنی همه تصاویر فایل لودینگ را نمایش بدهند و نشانی اصلی تصویر در data-img باشد

خیلی خیلی ممنون آقا ایمان

فقط یک سوال ، وجود data-img در تگ img ، در html5 با قوانین w3 سازگاره ؟

ویرایش شده در توسط Ghasem Paran
0

به اشتراک گذاری این پست


لینک به پست

آقا ایمان کار نمیکنه

post-2969-0-31120700-1407778563_thumb.jp

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

با تکنولوژی Lazy Load سرچ کنید!

اسکریپت دیگه ای نیست ؟

با این که داخل localhost اجرا میشه ، عکس ها چند دقیقه طول میکشه تا لود بشه :huh:

ظاهر با پلاگین jquery scrollbar مشکل داره :(

ویرایش شده در توسط Ghasem Paran
0

به اشتراک گذاری این پست


لینک به پست

لود تصاویر به حجمشون بستگی داره در حالت عادی هم همین زمان رو می بره ولی چون زیر اسکرول صفحه است کاربر نمی بینه

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


$(document).ready(function() {
$(window).scroll(function() {
$("img").each(function() {
var data = $(this).attr("data-img");
var src = "http://yoursite.com/loading.gif";
var offset = $(this).offset();
var offset_top = parseInt(offset.top)/2;
var scroll = $(window).scrollTop();
if (scroll >= offset_top) {
$(this).attr("src", data);
} else
{
$(this).attr("src", src);
}
});
});
})

این رو تست کنید

data-img جزو اترهای مجاز html5 است.

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

تصاویر سایزشون 70*70 هست و حجمشون کمتر از 50 کیلوبایت

پلاگین

Lazy Load عالیه ، اما مثل با پلاگین های دیگه ای که استفاده کردم مشکل داره

آقای فخار کد شما هم با پلاگین

jquery scrollbar مشکل داره.

:(

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

ویرایش شده در توسط Ghasem Paran
0

به اشتراک گذاری این پست


لینک به پست

قبلی رو هم تست کردم تا اندازه ارتفاع رزولیشن سیستم درسته بعد یواش یواش مقدار اتسکرول از افست بالا می زنه و همه عکسها قبل از اسکرول شدن لود می شند ولی مشکل زمانی نداشت

شما اگر افزونه

jquery scrollbar را دارید باید همون رو ویرایش کنید اصولا دوتا کد window.scroll همزمان خونده نمی شند

تنظیم مقدار افست به سلیقه و مدیریت خودتون برمی گرده و مشکل اسکرول به بالا یا پایین با تنظیم اون اندازه درست می شه

2

به اشتراک گذاری این پست


لینک به پست

قبلی رو هم تست کردم تا اندازه ارتفاع رزولیشن سیستم درسته بعد یواش یواش مقدار اتسکرول از افست بالا می زنه و همه عکسها قبل از اسکرول شدن لود می شند ولی مشکل زمانی نداشت

کد اول شما که اصلا برای من کار نمیکنه

کد دوم ها با اسکرول به سمت پایین تصاویر لود میشن و اسکرول به سمت بالا تصویر پیش فرضی که داخل کدتون هست لود میشه.

شما اگر افزونه jquery scrollbar را دارید باید همون رو ویرایش کنید اصولا دوتا کد window.scroll همزمان خونده نمی شند

چطوری ؟ میشه بیشتر راهنمایی کنید ؟ :wub:

0

به اشتراک گذاری این پست


لینک به پست

بعد کلی جستجو یه کد پیدا کردم و کمی تغییرش دادم.


(function($){
$(window).load(function(){
$("img.lazy").show().lazyload({
effect : "fadeIn",
failure_limit : 10
});
$("body").mCustomScrollbar({
axis:"y",
autoHideScrollbar:true,
scrollButtons:{enable:true},
theme:"light-thick",
callbacks:{
whileScrolling:function(){ $("img.lazy").lazyload(); }
}
});
});
})(jQuery);

الان 2 تا پلاگین هیچ مشکلی با هم نداره و نمایش داده میشوند.

فقط این که scrollbar سرعتش اومده پایین و هنگام اسکرول تیک میزنه صفحه. کمک !!! :(

0

به اشتراک گذاری این پست


لینک به پست

این کد شما به تنهاییی که کاری انجام نمی ده این باید به یک کتابخانه مثل lazy متصل بشه که با توجه به دستکاری اسکرولر طبیعتا سرعت رو می آره پایین و روش حرفه ای برای سایتهای بزرگ نیست

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

3

به اشتراک گذاری این پست


لینک به پست

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

کجایه

اسکرولر را

باید تغییر داد ؟

اصلا قابل خوندن نیست فایل


http://jsfiddle.net/6odvgh9p/

0

به اشتراک گذاری این پست


لینک به پست

این فایل min است باید فایل اصلیش را دانلود و ویرایش کنید

2

به اشتراک گذاری این پست


لینک به پست

این فایل min است باید فایل اصلیش را دانلود و ویرایش کنید


http://jsfiddle.net/mnu2fra3/

0

به اشتراک گذاری این پست


لینک به پست

همش رو باید ویرایش کنید :D

یک فرصت آزاد می خواد که آدم بشینه توابع رو بخونه و ببینه کار هر کدوم چیه اونوقت بر اساس offset.top تصاویر بهشون مقدار اضافه کنه

2

به اشتراک گذاری این پست


لینک به پست

همش رو باید ویرایش کنید :D

یک فرصت آزاد می خواد که آدم بشینه توابع رو بخونه و ببینه کار هر کدوم چیه اونوقت بر اساس offset.top تصاویر بهشون مقدار اضافه کنه

:D :D

آقا ایمان نظرتون در مورد این که بیخیال اسکرولر بشم چیه ؟

ارزش نداره اگه بخوایم تغییرش بدیم ، ممکنه ورژن جدیدتر هم بیاد.

سنگین ترین فایل صفحه هم همین اسکرولر هست

0

به اشتراک گذاری این پست


لینک به پست

من که عرض کردم

 روش حرفه ای برای سایتهای بزرگ نیست

کمتر سایت بزرگ و محبوبی را می تونید پیدا کنید که از اینجور ابزار توش باشه مگر اینکه از یک هاست اختصاصی خیلی قدرتمند استفاده کنه و به نوعی بخواد قدرت سرورش را به نمایش بگذاره

2

به اشتراک گذاری این پست


لینک به پست

حذفش کردم.

آقا ایمان و امین ، خیلی ممنون بابت راهنمایی ها و کمک هاتون :wub:

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط sajjadmp
      بعد از مدت ها سلام .
      یه فکری به نظرم رسیده که به درد من میخوره میخوام ببینم برنامه نویسای عزیز میتونن عملیش کنن یا نه ، البته بعید میدونم اینجا به نتیجه برسم .
      میخوام ببینم میشه با کد نویسی قابلیتیو به وجود اورد که توی نوشته ها بعد از اسکرول کردن و گذشتن از یک پاراگراف ، اسکرول بار یه مکثی بکنه .
      یه قابلیتی شبیه lazy load ولی با این تفاوت که اینجوری کل متن به یه اسلایدر تبدیل میشه .
      اگه با کدنویسی میشه لطفا راهنمایی کنید به نظر من که جالبه .
      با تشکر
    • توسط عمارگراف
      سلام دوستان
      وقتتون بخیر
      یه مسئله ای ذهنمرو مشغول کرده.
      میخوام یه کدی داشته باشم برای اسکرول بی نهایت - infinite scroll مثل سایتهای اجتماعی(fb - tw) که وقتی کاربر اسکرول میکنه به پایین بقیه تصاویر و مطالب لود بشه.
      اما نکته خاصش اینجاشت که میخوام این کد رو برای محتوای داخل یه مطلب بنویسم.
      یعنی :
      یه مطلب دارم که داخلش یه گالری دارم با 1000عکس.اما در مرحله اول فقط مثلا 10 تا تصویر لود بشن.بعدش که اسکرول اومد پایین 10 تا 10 تا تصاویر بعدی لود بشن.
      نکته دوم اینکه همون صفحه میخوام قابلیت فیلتر هم داشته باشه.
      یعنی :
      بعنوان مثال من تصاویر شاخص چندین مطلب رو لود میکنم توی یه صفحه ، میخوام بعدش بتونم به صورت ای جکس نتیجه رو فیلتر کنم.دقیقاً مث این سایت : زاهدنژاد
      پس شد دو نکته :
      1-چجوری اسکرول بی نهایت رو روی صفحات و مطالب اجرا کنم؟
      2-چجوری نتایج کوئری های وردپرس رو با ای جکس فیلتر کنم؟ (باید لینک دسته رو اون بالا بذارم و نتیجه رو توی content نمایش بدم؟)
      ممنون
      یا علی