لود کردن عکس با آژاکس

amirepsilon · Mar 2, 2012

سلام
دوستان من با jquery کار میکنم
فرض کنید میخواهیم یک عکس 1 مگابایتی رو لود کنیم
چطور میتونیم تا قبل از اینکه عکس کامل لود بشه، پیغام "انتظار" رو نمایش بدیم، وقتی کامل لود شد، عکس رو نمایش بدیم ؟

amirepsilon · Mar 19, 2012

دوستان کسی میتونه کمک کنه ؟

benyamin_pc · Mar 20, 2012

میشه ی عکس گیف که مثل چرخش یه دایره باشرو نمایش بدین و وقتی هم که جواب رکوئست برگشت و اس آر سی عکس عوض کرد اون دایره که مثل لودینگ بوده با عکس عوض میشه , فکر نکنم کلا بشه میزان لود شدرو از میزان کل مثل فلش نمایش داد چون ایونتی برای پروگرس نیست و کلا میزان بایت لودد نمیشه گرفت حتی تو html5 هم در این زمینه چیزی ندیدم

farik · Mar 28, 2012

باسلام..
اول از همه بگم راحت ترین کار استفاده از رویداد onload هست..اینم مثال(فقط شک دارم که استاندارد باشه):{در opera ,chrome ,safari,ff,ie تست شد و عمل کرد)

کد:

<html>
<head>
</head>
<body>
<img id="far" src="http://l.yimg.com/cv/ip/ap/default/120327/mudd1.jpg" onload="alert('hi');" />
</body>
</html>

خوب اگه از jquery استفاده میکنین از رویداد load کمک بگیرین اینجا:http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/
اگر هم خواستین فقط با js کار کنین و عکس ها رو لود کنین این هم پبشنهاد میشه(انصافا این یکی واسه منم راه حلش جالب بود):http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
اینم یک پیشنهاد دیگه از دوستان بود :

کد:

Using the html5 data attribute you can define a 'loaded state' on the DOM object itself.

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />
Then elsewhere you can do:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

source:http://stackoverflow.com/questions/...f-an-image-has-loaded-using-javascript-jquery
ببخشید اگه طولانی شد...موفق باشید...

eAmin · Mar 28, 2012

رویداد onload استاندارد هست، منتها در مرورگرهای قدیمی مثل ie6 برای عکسها و لود کردن اسکریپتها کار نمیکنه و باید از روش های دیگه استفاده کرد.
مثلا از پراپرتی complete میتونید استفاده کنید که هر وقت عکس کامل لود شد مقدار true بر میگردنه در غیر اینصورت false برمیگردونه: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_complete

دو مورد بعدی هم عملا هیچ فرقی با هم ندارن و از یک رو ش استفاده می کنند، مخصوصا" روش سومی که فقط پیچونده و یه روش من درآوردی! رو پیاده کرده اصلا به نظر من نیازی به استفاده از jQuery نبود (فقط از خاصیت data برای اینکار استفاده کرده)، مگر اینکه واقعا بخواید یک کار بزرگ انجام بدید که در اون از jQuery استفاده شده و برای راحتی بیشتر از jQuery استفاده کرد.
--------
در مورد سوال دوستمون هم میتونند از css هم به تنهایی برای اینکار استفاده کنید! البته به دقیق JavaScript نیست ولی در هرصورت همون کار رو تقریبا انجام میده!
روش هم به اینصورت هست که برای تگهای img در صفحه یک پس زمینه در نظر بگیرید و یک عکس متحرک کوچک رو در اون قرار بدید! حالا بستگی به خودتون داره که بخواید متن رو هم داخل عکس قرار بدید یا جداگانه. اگر بخواید متن رو جداگانه قرار بدید میتونید از خاصیت content در css استفاده کنید.

موفق باشید.