رفتن به مطلب

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


پست های پیشنهاد شده

سلام

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


http://demo.tempfa.org/multinews

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

ممنون

لینک به ارسال

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


$(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 باشد

لینک به ارسال

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


$(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
لینک به ارسال

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

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

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

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

ویرایش شده توسط Ghasem Paran
لینک به ارسال

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

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


$(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 است.

لینک به ارسال

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

پلاگین

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

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

jquery scrollbar مشکل داره.

:(

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

ویرایش شده توسط Ghasem Paran
لینک به ارسال

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

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

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

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

لینک به ارسال

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

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

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

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

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

لینک به ارسال

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


(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 سرعتش اومده پایین و هنگام اسکرول تیک میزنه صفحه. کمک !!! :(

لینک به ارسال

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

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

لینک به ارسال

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

کجایه

اسکرولر را

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

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


http://jsfiddle.net/6odvgh9p/

لینک به ارسال

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


http://jsfiddle.net/mnu2fra3/

لینک به ارسال

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

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

لینک به ارسال

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

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

:D :D

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

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

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

لینک به ارسال

من که عرض کردم

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

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

لینک به ارسال

حذفش کردم.

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...