• اطلاعیه ها

    • Saeed Fard

      سیاره وردپرس ایران   15/10/95

      سایت‌های زیادی در ایران و سرتاسر وب در زمینه گسترش وردپرس تلاش دارند و نوشته‌های آموزشی منتشر می‌کنند. اما ضرورت یک منبع خوب و ارزشمند برای جمع‌آوری بهترین‌های وب ایران و دنیا باعث ایجاد سیاره وردپرس شد تا دنبال کنندگان این موضوع به صورت یکجا و آسان بتوانند به این نوشته‌ها دسترسی داشته باشند.     در سیاره وردپرس این بستر فراهم شده است که آدرس وب‌سایت‌های مربوطه ثبت و برای این سرویس ارسال شود، آخرین نوشته‌های مفید وب‌سایت‌ها در سیاره وردپرس و نیز در بخش اخبار وردپرس پیشخوان سایت‌های وردپرسی از طریق افزونه‌ی Parsi Date نمایش داده می‌شود. همینطور کاربران از طریق عضویت در خبرنامه ایمیلی سیاره وردپرس می‌توانند به صورت دوره‌ای بهترین و جدیدترین نوشته‌های وردپرسی را که توسط اعضای تحریریه و همکاران سیاره وردپرس بررسی و تایید می‌شود را در ایمیل خود دریافت کنند.   امکانات سیاره وردپرس امکان ثبت آدرس سایت‌هایی که نوشته‌های مفید در زمینه وردپرس دارند. نمایش نوشته‌های وردپرس سایت‌ها در سیاره وردپرس نمایش نوشته‌های وردپرس در پیشخوان سایت‌های وردپرس فارسی توسط ویجت اخبار پلاگین Parsi Date و ... امکان ثبت ایمیل کاربران علاقه‌مند جهت دریافت مطالب محبوب و ویژه در خبرنامه دوره‌ای سیاره توسط اعضای تحریریه و ... جهت ثبت سایت وردپرسی یا ایمیل خود به سایت سیاره وردپرس مراجعه کنید   تاپیک پیشنهادات و همکاری در سیاره وردپرس : http://wpu.ir/qlhy5  
Ghasem Paran

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

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

سلام

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


http://demo.tempfa.org/multinews

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

ممنون

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


لینک به پست

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

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


لینک به پست

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


$(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 است باید فایل اصلیش را دانلود و ویرایش کنید

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


لینک به پست

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


http://jsfiddle.net/mnu2fra3/

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


لینک به پست

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

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

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


لینک به پست

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

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

:D :D

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

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

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

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


لینک به پست

من که عرض کردم

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

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

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


لینک به پست

حذفش کردم.

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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

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