احتمالاً بارها وارد یک سایت شدهاید و دیدهاید که به محض ورود، تا زمانی که کل سایت بارگزاری شود، یک عکس چرخان و یا یک نوار که در حال پر شدن است، نمایش داده میشود، اگر میخواهید بدانید چطور این کار را در مورد سایت یا وبلاگ خودتان انجام دهید، این آموزش را دنبال کنید.
البته چون صفحه ما طولانی نبود، خودمان تنظیم کردهایم که بعد از 3 ثانیه آن عکس مخفی شود، اما کدی که در قسمت اول آموزش به شما ارائه میکنیم، بعد از لود شدن سایت، عکس را مخفی خواهد کرد.
ایده کلی:
ایده کلی این است که ما به محض لود شدن سایت، یک عکس به کاربر نمایش دهیم و به محض اینکه آخرین خط کدهای ما اجرا شد، این عکس را مخفی کنیم.
مخفی کردن عکس بعد از لود شدن سایت:
گام اول: در بین کدهای صفحه مورد نظرتان، تگ
را پیدا کنید. دقیقاً بعد از آن، کد زیر را قرار دهید:
توجه کنید که عکس بالا را باید ذخیره کنید و به نام preloader در پوشهای به نام img در کنار صفحه مورد نظرتان قرار دهید و یا اینکه هر کجا که خواستید قرار دهید، فقط آدرسی که در کد بالا قرمز شده است را به آدرس عکس تغییر دهید.
گام دوم: تگ را د بین کدهای صفحه خود پیدا کنید. (تقریباً انتهای کدهای صفحه میشود. یعنی یک خط مانده به آخر). این کدها را قبل از
کلمات کلیدی: آموزش javascript, کدهای آماده جاوا اسکریپت, ابزارهای جاوا اسکریپت, javascript برای سایت و وبلاگ, ابزار بارگزاری برای صفحه سایت, ابزار load برای وبلاگ, مخفی کردن عکس بعد از لود شدن سایت, ترفندهای javascript, جلوگیری از کلیک در صفحه
1- مینو رسوخی : بوسیله: , در: Wednesday, 2012 June 20-کد: 4474 ممنون بسیار عالی و واضح
2- مصطفی روستایی: بوسیله: , در: Wednesday, 2012 October 10-کد: 5044 بسیار کاربردی و زیبا بود
ممنون
3- كاربر: بوسیله: , در: Monday, 2012 October 29-کد: 5190 سلام
كلا سايت مفيد علمي خوبي داريد.
تشكر مي كنم
4- فرزاد: بوسیله: , در: Sunday, 2014 January 26-کد: 9334 دستت درد نکنه. خیلی عالی بود.
5- حسین: بوسیله: , در: Wednesday, 2019 March 06-کد: 15960 خیلی ممنون کارم رو راه انداخت
6- منصوری: بوسیله: , در: Wednesday, 2021 April 14-کد: 16565 کد لودینگی که گذاشته بودین فوقالعاده عالی و توضیحات بسیار مناسب بود مرسی واقعا دمتون گرم
7- سعید: بوسیله: , در: Tuesday, 2021 July 06-کد: 16589 سلام یه کد هست برای اضافه کردن لودینگ به سایت این از سایت rnhttps://codepen.io/martinvd/embed/xbQJom?height=600&default-tab=result&embed-version=2#result-boxrnهست html رو توی header.php اضافه کردم و css رو تو style.css اضافه کردم بازم نشد