PDA

View Full Version : سوال: در مورد load چگونگی اولیه تمامی عکس ها (همزمان با load صفحه default)


orca13
شنبه 08 مهر 1391, 20:53 عصر
سلام!
من منوها و چند تا دکمه تو پروژم دارم که با CSS (و یا جاوااسکریپت) تعیین کردم که وقتی کاربر میره روش، عکسش عوض بشه (یه کاره معمول)
حالا سایت رو که آپلود کردم، وقتی میرم رو دکمه طول میکشه تا عکس عوض شه (چون میخواد load شه)
میخواستم بدونم چجوری همون اول همرو load کنم، که دیگه این مشکل پیش نیاد.

ممنون
saeed262626
یک شنبه 09 مهر 1391, 07:18 صبح
می تونی از جاواسکریپت استفاده کنی مانند این sample





<head>
<script language = "JavaScript">
function preloader()
{
MyImage = new Image();
MyImage .src = "file.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
orca13
یک شنبه 09 مهر 1391, 07:27 صبح
ممنون،
خب بعد چجوری ازش استفاده کنم؟
فک کنم اینجوری دیگه از CSS نمیتونم استفاده کنم، درسته؟
orca13
شنبه 15 مهر 1391, 18:43 عصر
این مشکلی که ذکر کردم، حل نشد.
متدی که نوشتم اجرا میشه، اما خب بازم مشکل دیر load شدن عکس ها حل نشده. (البته چون نمیدونم چجوری ازون عکس هایی که به این صورت pre-Load شدن، استفاده کنم)

میخواستم در متد setAttribute به جای value استفاده کنم که نمیشد.
لطفا راهنمایی کنید.

ممنون
amirzandi
شنبه 15 مهر 1391, 18:50 عصر
ببین عزیز من همه این راه ها رو رفتم ، به نتیجه نرسیدم... شما باید از روش Sprite استفاده کنی .

به شکل توجه کن ،

93665

شما عکس منو ها رو اینجوری ذخیره می کنی ، با استفاده از css وقتی که hover شد ، فقط background-position رو تغییر می دی.
orca13
شنبه 15 مهر 1391, 19:31 عصر
میشه لطفا یه عکس بزرگتر بزاری؟ و یکم هم بیشتر توضیح بدی؟
ممنون
amirzandi
شنبه 15 مهر 1391, 19:37 عصر
93667

شما در css این قابلیت را داری که background را position بهش بدی


.Button
{
Background-Image: url('./Images/1.jpg');
Background-Repeat: Repeat-x;
Background-position: 0px 0px;
}
.Button:Hover
{
Background-postion: 0px -30px;
}

امتحان کنید متوجه می شید ، چقدر راحت هست و بدون وقفه در load کار می کند.
orca13
شنبه 15 مهر 1391, 19:49 عصر
ممنونم ازت، ولی دقیقا نفهمیدم چه تکنیکی هست.
اون عکس ها به هم چسبیده اند؟
شرمنده، اگه واضحترتوضیح بدی، ممنون میشم.
amirzandi
شنبه 15 مهر 1391, 19:53 عصر
دقیقا ، عکس ها به هم چسبیده هستند و زیر هم هستند ، وقتی شما در css میگی background-position: 0px 0px میاد این عکس را بالا قرار می ده ، کنترل شما هم یک height مشخص داره ، مثلا 30px ، پس فقط قسمت بالای عکس دیده می شه ، وقتی بهش میگی background-position: 0px -30px میاد عکسی که داریم ، به اندازه 30 پیکسل به بالا جابجا می کنه .

در اصل همه عکسهایی که شما می خواستی زمان hover روی کنترل load کنی ، الان شده هست ، فقط موقعیت عکس را جابجا می کنی...

اگر یکبار انجام بدی متوجه می شی!
orca13
یک شنبه 16 مهر 1391, 09:19 صبح
عجب تکنیک راحت، ولی کارامدی هستش!
فقط یه سوال، شما تو اون عکسی که گذاشتی، منو رو در سه حالت ایجاد کردی، حالت سوم برای مشخص کردن اینه که کاربر تو کدوم صفحه قرار داره؟
amirzandi
یک شنبه 16 مهر 1391, 09:25 صبح
هم می تونه اون باشه ، هم می تونه در زمان کلیک با استفاده از active در CSS ، عکس سومی باشه.