• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
نوار لودینگ جی میل
#1
سلام،
به لودینگ جیمیل توجه کرین؟
تا زمانی که صفحه کاملا لود نشه به نوار جلوی روته که درصد بارگذاری صفحه رو نشونت میده.

دارم سعی میکنم چنین چیزی رو پیاده کنم منتها ... Dodgy

تا الان یه اسکریپت دارم که سایز کامل صفحه(شامل سوس+ تصاوری و فایل های شامل شدش مثل js ها و...) رو به دست میاره و بر اساس سرعت اینترنت شما نوار لودینگ رو پر میکنه.

اما اینجا دو تا مشکل به وجود میاد
- دفعات بعدی که کاربر از صفحه دیدن میکنه، اطلاعاتش کش شده اما با توجه به روش لودینگمون باید زمان زیادی رو منتظر بمونه
- اگر به هر دلیلی سرعت اینترنت افت کنه و یا حتی بیشتر شه باز هم بر اساس همون سرعت پیش فرضی که ابتدای کار بدست اوردیم نوار لودینگ پر میشه
که میشه نتیجه گرفت روش صحیحی نیست
پیشنهاد و یا نمونه ای دارید؟
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط :
#2
احسان به نظر من بیا ان کار رو انجام بده :
یه تابع جاوا اسکریپت باشه که فایل های js و css رو لود کنه : ( یا هر چیز دیگه که میخوای اضافه کن )
« این تابع رو قبلا توی یه سایت دیده بودم که الان لینکش یادم نیست »
کد:
function load_ifile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
  var ifile=document.createElement('script')
  ifile.setAttribute("type","text/javascript")
  ifile.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
  var ifile=document.createElement("link")
  ifile.setAttribute("rel", "stylesheet")
  ifile.setAttribute("type", "text/css")
  ifile.setAttribute("href", filename)
}
if (typeof ifile!="undefined")
  document.getElementsByTagName("head")[0].appendChild(ifile)
}

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

الان این صفحه رو امتحان کن . با timeout یه جورایی سرعت رو تنظیم کردم که مشخص باشه چه اتفاقی میفته ...
کد:
<!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" />
<title>Gmail Loading</title>

<script>
function load_ifile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
  var ifile=document.createElement('script')
  ifile.setAttribute("type","text/javascript")
  ifile.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
  var ifile=document.createElement("link")
  ifile.setAttribute("rel", "stylesheet")
  ifile.setAttribute("type", "text/css")
  ifile.setAttribute("href", filename)
}
if (typeof ifile!="undefined")
  document.getElementsByTagName("head")[0].appendChild(ifile)
}
setTimeout('load_ifile("css/style.css", "css");document.getElementById("loading").innerHTML="Load 1 of 4"',1000);

setTimeout('load_ifile("css/style2.css", "css");document.getElementById("loading").innerHTML="Load 2 of 4"',2000);
// Load 2 of 4
setTimeout('load_ifile("js/script.js", "js");document.getElementById("loading").innerHTML="Load 3 of 4"',3000);
// Load 3 of 4
setTimeout('load_ifile("js/script2.js", "js");document.getElementById("loading").innerHTML="Load 4 of 4"',4000);
// Loaded
</script>

</head>

<body>
<div id="loading">&nbsp;</div>
</body>
</html>

توی body یه سری المنت اضافه کن و استایلشون رو توی فایل های css تعریف کن. بعد از این که المنت ظاهر شد حالت اولیه داره، ولی بعد از تموم شدن کار لود فایل css استایل میگیره ...

دیگه فقط میمونه یه نوار پیشرفت که روی صفحه باشه تا کاربر متوجه نشه که کم کم داره لود میشه...
اونم که با یه div میتونی صفحه رو بپوشونی ...

نظرت چیه ؟
  پاسخ
تشکر شده توسط : oia undefined Reza ali786
#3
http://annette-art.com/
  پاسخ
تشکر شده توسط : oia
#4
(۱۳۹۱ مرداد ۱۱, ۰۶:۰۶ ب.ظ)scorpion نوشته: http://annette-art.com/

اینجا که اصلا لودینگ نداشت.
  پاسخ
تشکر شده توسط :
#5
با کروم که داره، با IE9 هم داره. یه ctrl + F5 بزن Smile
  پاسخ
تشکر شده توسط :
#6
کاره خودته ؟
با چی نوشتی؟(یا نوشتن؟! )
-- منظورم فریم ورک بود
  پاسخ
تشکر شده توسط :
#7
کار خودمه ولی مربوط به چهار پنج سال پیشه یادم نیست ولی با Jquery هست
view source کنی مشخصه
  پاسخ
تشکر شده توسط :
#8
جاوا اسکریپتش رو نگفتم که. نوار لودینگ که اصلآ نیومد
منظورم قسمت PHP یش بود.
  پاسخ
تشکر شده توسط :
#9
آها! نوار لودینگش برا من که میاد Smile
با زند نوشتم
  پاسخ
تشکر شده توسط :
#10
اینا رو دیدم گفتم شما هم ببینین :

Caching Images With JavaScript and HTML5 progress Bars

Cross Browser HTML5 Progress Bars In Depth
  پاسخ
تشکر شده توسط : undefined


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان