[agotd]

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

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

کد:

<a href="" class="post">

</a>

و استایل CSS :

کد:

.post{

background:url(1.png)

display:block;

width:24px;

height:24px;
}

و برای hover :

کد:

.post:hover{

background:url(2.png)

display:block;

width:24px;

height:24px;
}

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

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

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

کد:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

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

کد:

preload([
    '2.png',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

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

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

کد:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

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

کد:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

موفق باشید.