صفحه اصلی arrow مقالات arrow جاوا اسکریپت arrow بارگذاری تصاویر در cache
بتهوون
بهترین لحظات زندگی من لحظاتی بود که در خواب گذراندم.
بارگذاری تصاویر در cache چاپ ارسال به دوست
رای کاربران: / 4
ضعیفعالی 
نویسنده رجبی   
۲۶ اسفند ۱۳۸۶
سلام به دوستان گلم

در دنیای طراحی امروز به دلیل با اهمیت بودن مسئله زیبایی و جلب توجه کاربران و پویا شدن صفحات وب استفاده از جاوا اسکریپت نیز متداول و ضروری شده علاوه بر این حتما برای شما پیش آمده در صفحه ها از دو خصیصه onmouseover و onmouseout  برای تغییر یک عنصر در هنگام حرکت ماوس بر روی آنها استفاده کرده باشید .

Images
نکته قابل تامل اینجاست که وقتی روی عنصر img برای تصویر از این دو استفاده کرده باشید  کاربر ماوس را روی تصویر برده و صفحه مجددا تصویر جدیدی که شما در کد جاوا اسکریپت درخواست داده اید را بارگذاری میکند . خوب ؛ اینجاست که زحمات شما برای سریع و زیبا بودن صفحه ای که طراحی کرده اید بی ثمر شده است زیرا امروزه کاربرانی که از سرویس هایی همچون یاهو و گوگل و... که از فناوری های جدید مثل آجاکس استفاده می کنند توقع دارند صفحات شما نیز برای یک تغییر نیاز به صبر و حوصله کاربر نداشته باشند.

برای این کار یک راه حل ساده وجود دارد بله ؛ شما می توانید تصاویر مورد نیاز خود را همراه با صفحه ای که یکبار بارگذاری میشود بر روی رایانه کاربر بارگذاری کرده و در صورت نیاز در کد خود استفاده کرده و چون تصویر همراه صفحه در رایانه کاربر موجود است همان لحظه بدون نیاز به بارگذاری و درخواست مجدد از سرور تصویر جدید جایگزین می شود.



اما برای اجرا ,مراحل زیر را انجام دهید

 کدهای مربوط به جاوا اسکریپت را جدا از سند html ذخیره کنید (loadimage.js)

به کد زیر توجه کنید:

label = new Image(h,w)
label.src="image.url"

در کد , label یک نام برای تصویر شماست همین طور h  و w ارتفاع و عرض تصویر شما است در خط دوم بعد از label همان نامی که در خط اول مورد استفاده قرار دادید src. را تایپ کنید و آدرس تصویر از سرور را در آن قرار دهید برای مثال

my_image = new Image(120,120)
my_image.src="my_image.png"
خوب دیگر به سراغ سند HTML میرویم

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="conten-script-type" content="text/javascript" />

<script type="text/javascript" language="javascript" src="loadimage.js"></script>

</head>

<body>
click here <a href="#" onmouseover="document.cache.src=over.src" onmouseout="document.cache.src=out.src">
<img src="real.jpg" name="cache" width="120" height="120" /></a>
</body>
</html>
به خصیصه name در عنصر img توجه داشته باشید همین طور به بزرگی حروف در new Image

صفحه نمونه

دانلود مثال

امیدوارم مورد توجه شما قرار گرفته باشد و در قسمت یادداشت ها سوالات خود را مطرح کنید.
آخرین بروز رسانی ( ۲۴ فروردين ۱۳۸۷ )
برگشت

سایر منو ها

آنتی ویروس NOD32

ورود و خروج

نام کاربری

کلمه عبور

مرا به ياد داشته باش
فراموش کردن کلمه عبور
ثبت نام نكرده ايد؟ عضویت

تصویر تصادفی

آخرین فایلهای آپلود شده

FileMozilla Firefox 3.5 Final
FileMozilla Firefox 3.0 Final
FileMozilla Thunderbird 2.0 Final
FileESET Smart Security 4.0
FileESET NOD32 4.0 Antivirus
FileMozilla Firefox 2.0 Final
FileFileZilla