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

اسفند ۵, ۱۳۹۲ توسط : سعید

شاید برای شما هم این مشکل پیش اومده باشه که به عنوان مثال برای یک تگ 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([
    '۲٫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

بازدید : ۹۰۰۲

اسفند ۶, ۱۳۹۲ @ ۹:۴۶ ق.ظ

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

پاسخ دادن
    سعید
    اسفند ۶, ۱۳۹۲ @ ۱۰:۳۷ ق.ظ

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

    پاسخ دادن
اسفند ۷, ۱۳۹۲ @ ۱۲:۴۴ ق.ظ

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

پاسخ دادن
    سعید
    اسفند ۷, ۱۳۹۲ @ ۹:۰۵ ق.ظ

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

    پاسخ دادن
اسفند ۲۵, ۱۳۹۲ @ ۹:۳۷ ق.ظ

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

پاسخ دادن
    سعید
    اسفند ۲۹, ۱۳۹۲ @ ۱۲:۳۹ ب.ظ

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

    پاسخ دادن
    سعید
    اسفند ۲۹, ۱۳۹۲ @ ۱۲:۳۹ ب.ظ

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

    پاسخ دادن
اردیبهشت ۲, ۱۳۹۳ @ ۱۰:۵۱ ق.ظ

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

پاسخ دادن
خرداد ۴, ۱۳۹۳ @ ۲:۴۷ ب.ظ

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

پاسخ دادن
    سعید مقدم زاده
    خرداد ۵, ۱۳۹۳ @ ۸:۲۲ ق.ظ

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

    پاسخ دادن
انجام پایان نامه
خرداد ۲۴, ۱۳۹۴ @ ۹:۲۵ ب.ظ

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

پاسخ دادن

پاسخ دهید

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


*