لود شدن تصاویر به صورت on demand

[نسـتـــرن 194]

سلام به همه دوستای خودم

خوبین خدا رو شکر؟

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

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

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

امکانش هست راهنماایی کنین؟ممنون

http://glassy-garden.com/album/

[isk 4447]

از چی استفاده کردید که کار نکرد؟ چون وقتی اینجوری با یه کلمه‌ی "کار نکرد" جلو برید اساساً برای هر چیزی میشه استفادش کرد. و روش‌های بعدی رو هم منتفی کرد.

به هر حال از lazy load استفاده کنید.

[نسـتـــرن 194]

چند تا افزونه برای lazy load استفاده کردم.

افزونه کامل و سالمی سراغ دارید؟

[imanfakhar 26231]

https://wordpress.org/plugins/lazy-load/

افزونه جی کوئری

http://plugins.jquery.com/lazyload/

دمو

http://www.appelsiini.net/projects/lazyload/enabled_fadein.html'>http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

طریقه استفاده

http://www.appelsiini.net/projects/lazyload

[نسـتـــرن 194]

ممنونم.مشکلی که ایجاد شده اینه که تصاویر لود نمیشن کلا.فقط قابشون هست.

در واقع همه عکسام غیب شدند!

[imanfakhar 26231]

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

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

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

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

<img src="img/example.jpg" width="640" height="480">

کدش بوده یعنی بجای src باید data-original باشه و کلاس lazy هم به تصویر اضافه شده باشه

[نسـتـــرن 194]

آخه من اومدم کوءری ایجاد کردم و نوشتم و از اون طریق عکس ها می آد.یعنی کد زیر

<div class="he-wrap tpl4">
	 <?php the_post_thumbnail('medium'); ?>
	 <div class="he-view">
	  <div class="bg">
	   <div class="a0" data-animate="fadeIn"></div><div class="a1" data-animate="fadeIn"></div><div class="a2" data-animate="fadeIn"></div><div class="a3" data-animate="fadeIn"></div><div class="a4" data-animate="fadeIn"></div>

حالا این تغییراتی که فرمودید رو نمیتونم اعمال کنم که.

[imanfakhar 26231]

این کد را جایگزین تکه کدی که خودتون نوشتید

کنید

<div class="he-wrap tpl4">
<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
?>
<img class="lazy" data-original="<?php echo $src;?>" width="300" height="300">
		 <div class="he-view">
		  <div class="bg">
		   <div class="a0" data-animate="fadeIn"></div><div class="a1" data-animate="fadeIn"></div><div class="a2" data-animate="fadeIn"></div><div class="a3" data-animate="fadeIn"></div><div class="a4" data-animate="fadeIn"></div>

[نسـتـــرن 194]

ممنونم.همین کارو انجام دادم.ولی همچنان تصاویر نشون داده نمیشه.

<div class="he-wrap tpl4">
	 <?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
?>
<img class="lazy" data-original="<?php echo $src;?>" width="300" height="300">
	 <div class="he-view">
	  <div class="bg">
	   <div class="a0" data-animate="fadeIn"></div><div class="a1" data-animate="fadeIn"></div><div class="a2" data-animate="fadeIn"></div><div class="a3" data-animate="fadeIn"></div><div class="a4" data-animate="fadeIn"></div>

[imanfakhar 26231]

صفحه ای که لینک دادید که برای من خیلی روون و کامل باز می شه مشکلتون الان دقیقا چیه؟

[نسـتـــرن 194]

ماشالا سرعت اینترنت شما بالاست پس :دی

این برگه حدود ۴۰۰ تا عکس رو همزمان با وارد شدن بهش،شروع میکنه به لود شدن که طبیعتا برای سرعت های معمولی خیلی سنگینه.خیلی از کاربرام اعتراض داشتند به این قضیه.مخصوصا اینکه قراره فیلتر بندی هم داشته باشه و فیلترش هم وقتی عمل میکنه که همه عکس ها لود بشه.

[imanfakhar 26231]

کدتون رو به این تغییر بدید (افزونه را هم نصب کنبد)

<div class="he-wrap tpl4">
  <?php
  $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
   echo get_the_post_thumbnail( $post_id, 'medium', array( 'class' => 'lazy', 'data-original' => $large_image_url ) ); ?>
		 <div class="he-view">
		  <div class="bg">
		   <div class="a0" data-animate="fadeIn"></div><div class="a1" data-animate="fadeIn"></div><div class="a2" data-animate="fadeIn"></div><div class="a3" data-animate="fadeIn"></div><div class="a4" data-animate="fadeIn"></div>