کد آماده :: لود عکسها با jQuery

فوریه 24, 2014 توسط : سعید

شاید برای شما هم این مشکل پیش اومده باشه که به عنوان مثال برای یک تگ 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;
}

اما مشکلی که این کد داره اینه که هنگامی که برای بار اول روی این لینک میریم عکس 2.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();

موفق باشید.
منبع : http://stackoverflow.com/questions/476679/preloading-images-with-jquery/476681#476681

فوریه 25, 2014 @ 9:46 ق.ظ

کدهایی که نوشتی توی مرورگر Opera درست نشون داده نمیشه راست چین هستش و رنگ بندی نداره ولی توی مرورگر فایرفاکس درست نشون داده میشه

پاسخ
    سعید
    فوریه 25, 2014 @ 10:37 ق.ظ

    بحث اصلي اين آموزش بارگزاري عكسها به وسيله جي كوئريه براي همين زياد روي استايل و شكل ظاهري كار نكردم

    پاسخ
فوریه 26, 2014 @ 12:44 ق.ظ

باسلام و عرض خسته نباشین
ممنو از آموزشتون
چرا از cdd sprites استفاده نکنیم؟
http://www.w3schools.com/css/css_image_sprites.asp

پاسخ
    سعید
    فوریه 26, 2014 @ 9:05 ق.ظ

    سلام
    بله حق با شماست ميشه ازش استفاده كرد اما css sprite يه كم محدوديت داره.ولي براي مثالي كه بالا زدم از روش شما هم ميشه استفاده كرد.
    موفق باشيد

    پاسخ
مارس 16, 2014 @ 9:37 ق.ظ

سلام
من می خواستم کد مربوط به نمایش پستهای به روز شده یک شبکه اجتماعی را بدست بیاورم ولی هرچقدر در اینترنت جستجو کردم موفق به پیدا کردن آن نشدم
فقط کدی که مثلا تعداد بیست پست را نمایش میدهد و بعد در انتها یک کلید برای نمایش دادن بیست پست بعدی روی آن کلیک باید کرد و همینطور تا آخر
با تشکر

پاسخ
    سعید
    مارس 20, 2014 @ 12:39 ب.ظ

    سلام.
    شبکه های اجتماعی معروف مثل فیسبوک ، توییتر و … معمولا برای اینکار شما یه سری API در اختیار برنامه نویس ها میذارن.
    اگر سایتی که مد نظر شماست از این API ها نداره میتونید با استفاده از RSS اون سایت مطالبش رو بدست بیارید.
    اگر بیشتر توضیح بدید بیشتر میتونم کمکتون کنم.
    موفق باشید

    پاسخ
    سعید
    مارس 20, 2014 @ 12:39 ب.ظ

    سلام.
    شبکه های اجتماعی معروف مثل فیسبوک ، توییتر و … معمولا برای اینکار شما یه سری API در اختیار برنامه نویس ها میذارن.
    اگر سایتی که مد نظر شماست از این API ها نداره میتونید با استفاده از RSS اون سایت مطالبش رو بدست بیارید.
    اگر بیشتر توضیح بدید بیشتر میتونم کمکتون کنم.
    موفق باشید

    پاسخ
آوریل 22, 2014 @ 10:51 ق.ظ

ممنون ولی CSS Image Sprites هم میشه تا حدودی کار کرد… بشیار عالی بود

پاسخ
می 25, 2014 @ 2:47 ب.ظ

برای اینکار استفاده از preload یه جورایی منسوخ شده محسوب میشه و بهتره از sprite استفاده کرد.
اگر چه sprite بیشتر برای ایکن استفاده میشه

پاسخ
    سعید مقدم زاده
    می 26, 2014 @ 8:22 ق.ظ

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

    پاسخ
انجام پایان نامه
ژوئن 14, 2015 @ 9:25 ب.ظ

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

پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*