• اطلاعیه ها

    • Saeed Fard

      حمایت وردپرس پارسی از همایش آینده وب و موبایل   19/04/74

        چهارم و پنجم اسفند ماه 1395، همایش آیندهٔ وب و موبایل ایران با حمایت سازمان فناوری اطلاعات در مرکز همایش‌های شهید قندی برگزار خواهد شد. این همایش یک رویداد ۲ روزه است که در آن پیشتازان صنعت وب و موبایل از تکنولوژی‌های روز دنیا در این حوزه‌ها سخن می‌گویند به طوری که این همایش پنجره‌ای به چشم‌انداز آینده‌ٔ وب و موبایل در جهان، و همچنین راهنمایی برای تصمیم‌گیران، تصمیم‌سازان و متخصصان ایرانی است.   فرصت‌هایی که FOWM#  برای شما خلق خواهد کرد: آشنایی با تکنولوژی‌های آینده‌ساز وب و موبایل شرکت در مباحث چالشی درباره وب و موبایل ارتباط و شبکه‌سازی با “قله‌های وب و موبایل” موقعیت‌های کاری، هم‌تیمی‌های جدید دریافت گواهی شرکت در همایش دو روز به‌یادماندنی سرشار از شگفتی   شرکت‌کنندگان در این همایش ضمن آشنایی با فناوری‌های آینده‌ساز وب و موبایل، شرکت در مباحث چالشی و ارتباط با بزرگان وب و موبایل ایران، می‌توانند موقعیت‌های کاری و هم‌تیمی‌های جدید برای کسب‌وکار خود بیابند. این همایش برای طراحان و توسعه‌دهندگان وب‌سایت و موبایل، مدیران ارشد سازمان‌ها، صاحبان کسب‌وکارهای کوچک و متوسط، دانشجویان و علاقه‌مندان دارای نکات آموزشی و جذاب خواهد بود.   مجید علوی‌زاده، دبیر همایش آیندهٔ وب و موبایل که سابقه اجرای چند همایش و سمینار مرتبط را دارد، اعلام کرد: جمعی از بهترین‌ها و پیشروان این دو حوزه در ایران با ارائه‌های تخصصی خود، چشم‌انداز آینده این صنعت‌ها را به شرکت‌کنندگان عرضه خواهند کرد.   در هر یک از روزهای برگزاری همایش، یک پنل تخصصی در مورد یکی از موضوع‌های مهم این حوزه نیز برگزار خواهد شد و دست‌اندرکاران به بحث و تبادل نظر خواهند پرداخت و در پایان، به شرکت‌کنندگان گواهی حضور در همایش اعطا خواهد شد.   ثبت نام در مهمترین رویداد صنعت وب و موبایل ایران تا پایان بهمن ماه ۹۵ امکان پذیر خواهد بود، برای ثبت نام و یا کسب اطلاعات بیشتر در خصوص این رویداد و آشنایی با موضوعات و سخنرانان به آدرس http://conf.wsschool.org/fowm مراجعه نمایید.   کاربران وردپرس پارسی می‌توانند با استفاده از کد wp-parsi از مبلغ ۴۰ هزار تومان تخفیف در ثبت نام برخوردار شوند.
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

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


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

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

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

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


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

با تکنولوژی 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 نمایش بدم؟)
      ممنون
      یا علی