کد لود تصاویر با جی کوئری

[saberi]

شاید برای شما هم این مشکل پیش اومده باشه که به عنوان مثال برای یک تگ a یک تصویر پس زمینه میذارید و میخواید هنگامی که موس میره روی این تگ تصویر عوض شه.

خب این کار خیلی ساده است :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و استایل CSS :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و برای hover :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اما مشکلی که این کد داره اینه که هنگامی که برای بار اول روی این لینک میریم عکس ۲٫png که قراره نمایش داده بشه با تاخیر نمایش داده میشه.این به این خاطره که هنوز این عکس لود نشده. داشتن چنین مشکلی توی سایت جالب نیست و سایت رو از حالت حرفه ای در میاره.
برای حل این مشکل میتونیم از jQuery کمک بگیریم . به اینصورت که هنگامی که صفحه داره لود میشه عکس دوم رو هم لود کنیم اما نمایشش ندیم.
برای اینکار میتونید از تابع زیر استفاده کنید :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

خب برای استفاده از این تابع کافیه که به صورت زیر عمل کنیم :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

با این کار تمام عکسهایی که به صورت آرایه به این تابع پاس میدیم در هنگام لود شدن صفحه بارگذاری میشن و مشکل بالا دیگه پیش نمیاد.

میتونیم تابع بالا رو به صورت یک پلاگین جی کوئری بنویسیم ، به صورت زیر :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

موفق باشید.