අපි AJAX යෙදුමක් සඳහා සම්පූර්ණ JS පූර්ව පූරණයක් සාදන්නෙමු. ප්‍රතිශත පූරණය සහිත පූර්ව පූරණය පෙර පූරණය යනු කුමක්ද?

අද අපි කතා කරන්නේ Preloader එකක් භාවිතා කර WordPress හි වෙබ් අඩවි පැටවීම සැඟවිය යුතු ආකාරය ගැන ය. සුදු පැටවීමේ තිරයක් වෙනුවට සජීවිකරණ රූපයක් පෙන්වන වෙබ් අඩවි අපි කවුරුත් දැක ඇත්තෙමු. ඔබේ වෙබ් අඩවිය පූරණය වීමට ප්‍රමාද නම් මෙම කුඩා උපක්‍රමය උපකාර විය හැක, නමුත් ඔබට තවමත් හිස් සුදු මොනිටර තිරයක් දෙස වැඩි වේලාවක් බලා සිටීමට අකමැති නොඉවසිලිමත් පරිශීලකයින් රඳවා ගැනීමට අවශ්‍ය වේ. හොඳයි, අපි යමු වර්ඩ්ප්‍රෙස් අඩවිය සඳහා පූර්ව පූරණයක් එක් කරන්න.

මම ප්ලගිනය සහ එය ක්‍රියා කරන ආකාරය විස්තර කිරීමට පෙර, මම එය බෙහෙවින් නිර්දේශ කරමි. ඉහත සියලු නිර්දේශයන් උදව් නොකරන්නේ නම් පමණක්, සියලු බලාපොරොත්තුව පූර්ව පූරණය සහ අඩවි පරිශීලකයින්ගේ ඉවසීම කෙරෙහි එහි බලපෑම මත පවතී.

Preloader යනු කුමක්ද?

පූර්ව පූරණයක් යනු වෙබ් පිටුව සම්පූර්ණයෙන්ම සැකසීමට සහ තිරය මත දර්ශනය වීමට පෙර සජීවිකරණය හෝ පැටවීමේ දර්ශකයක් ප්‍රදර්ශනය කිරීමේ යාන්ත්‍රණයකි. වෙනත් වචන වලින් කිවහොත්, වෙබ් අඩවියේ පිටුව බ්‍රවුසරය මඟින් සකසමින් සහ පූරණය කරන අතරතුර, හිස් තිරය ප්‍රතිස්ථාපනය කරන සජීවිකරණයක් තිරය මත දර්ශනය වේ.

මම මෙම මෙවලමෙහි විරුද්ධවාදියෙකි; පෙර පූරණයක් ස්ථාපනය කිරීමට වඩා අඩවි පැටවීම ප්‍රශස්ත කිරීම වඩා හොඳ බව මම විශ්වාස කරමි. මගේ අවබෝධයට අනුව, පූර්ව පූරණයක් අවශ්‍ය වන්නේ මිලියන ගණනක දත්ත සකසන විශාල දත්ත සමුදායන් සහිත විශාල ද්වාර, මාර්ගගත වෙළඳසැල් සහ මාර්ගගත සේවාවන්ට පමණක් වන අතර ඒවාට පැටවීම වේගවත් කළ හැකි ක්‍රමයක් නොමැත. මෙය මගේ පෞද්ගලික මතය වන අතර ඔබ මා සමග එකඟ නොවනු ඇත.

සංඛ්යා ලේඛනවලට අනුව, වෙබ් අඩවියක් පැටවීමට තත්පර 4 කට වඩා වැඩි කාලයක් ගත වුවහොත්, අසමත් වීමේ ඉහළ සම්භාවිතාවක් ඇත. පරිශීලකයා සම්පූර්ණයෙන්ම පූරණය වන තෙක් බලා නොසිට වෙබ් අඩවිය හැර යා හැක, මෙය ඉතා නරක දර්ශකයකි. සාමාන්‍ය ප්‍රශස්තිකරණය සමඟ, පරිපූර්ණ නොවේ, නමුත් තවමත්, මගේ වෙබ් අඩවිය තත්පර 2-3 කින් පූරණය වන අතර මෙම දර්ශකය මට හොඳින් ගැලපේ, සහ පරිශීලක සංඛ්‍යාලේඛන පෙන්නුම් කරන පරිදි. ඒකයි මම ආයෙත් කියන්නේ සයිට් එකක් හෙමින් ලෝඩ් වෙන කොට ඔප්ටිමයිසේෂන් එකක් ඕන, ප්‍රීලෝඩරයක් නෙවෙයි කියලා.

කෙටි හැඳින්වීමකින් පසු, අපි අපගේ "බැටළුවන්" වෙත ආපසු යමු. අපි ප්ලගිනය ස්ථාපනය කර වින්‍යාස කරමු.

Preloader ප්ලගිනය, සමාලෝචනය සහ වින්‍යාස කිරීම

මා සොයාගත් වඩාත්ම ප්‍රමාණවත් සහ නොමිලේ පූර්ව පූරණ ප්ලගිනය වන්නේ අද්විතීය නමක් සහිත ප්ලගිනයකි - Preloader. එච්චරයි, පුදුම වෙන්න දෙයක් නැහැ. කාරණය වන්නේ ඔබ wordpress.org පුස්තකාලයේ ප්ලගිනයක් සොයන විට ඔබට එය සොයාගත නොහැකි වීමයි. ඔබ සෙවුම් තීරුවේ පෙර පූරණය ලිවිය යුතුය. ප්ලගිනය ස්ථාපනය කරන්නේ කෙසේදැයි ඔබට සොයාගත හැකිය. එය මෙසේ පෙනේ:

ස්ථාපනය කිරීමෙන් පසු, Plugins/Preloader පටිත්ත වෙත යන්න, මෙම කුඩා මෙනුවෙන් සිටුවම් ආරම්භ වේ.

එබැවින්, සියලු සැකසුම් කෙටි ලැයිස්තුවක ඇත:

• සැකසීමේ පළමු පේළිය පූර්ව පූරණයේ පසුබිම් වර්ණයයි; පෙරනිමියෙන් එය සුදු වේ (#FFFFFF). ඔබ කැමති පරාමිතිය සැකසිය හැක.
• දෙවනුව, මෙය gif සජීවිකරණයේ ස්ථානයයි, එය ඕනෑම එකකට වෙනස් කළ හැකිය, ඔබට පික්සල 128x128 ප්‍රමාණය සැලකිල්ලට ගත යුතුය. සැකසීම් වල සපයා ඇති සබැඳිය භාවිතා කිරීමෙන්, ඔබ කැමති සජීවිකරණය බාගත කළ හැකිය.
• මීලඟ පියවර වන්නේ පූර්ව පූරණය පූරණය වන නාමාවලි තෝරා ගැනීමයි. ඔබට බාගත කරන්නා ප්‍රවර්ග මත, සම්පූර්ණ වෙබ් අඩවියේ, වෙන වෙනම ටැග් පිටු මත හෝ ප්‍රධාන පිටුවේ පමණක් ස්ථාපනය කළ හැකිය, එය ඔබට භාරයි.
• ඔබ කළ යුතු අවසාන දෙය නම් ඔබගේ සක්‍රීය තේමා ෆෝල්ඩරයේ header.php ගොනුව විවෘත කර විවෘත ටැගයට පසුව යෝජිත div() එක් කිරීමයි.
• ප්ලගිනය සක්‍රිය නම්, ප්ලගිනය ක්‍රියා කරන බව ඔබට දැනටමත් සත්‍යාපනය කළ හැකිය.

GIF වෙනස් කිරීමේදී එහි නම පූර්ව පූරණය විය යුතු අතර, රූප ප්ලගින ෆෝල්ඩරයේ එවැනි එක් සජීවිකරණයක් පමණක් තිබිය යුතු බව ද සඳහන් කිරීම වටී.

මෙය WordPress අඩවියක් සඳහා Preloader ප්ලගිනය භාවිතා කිරීම සඳහා අපගේ නිහතමානී මාර්ගෝපදේශය සම්පූර්ණ කරයි. ඔබට කිසියම් ප්‍රශ්නයක් හෝ ගැටළු තිබේ නම්, කරුණාකර අදහස් දැක්වීමේදී ලියන්න.

ඊට පස්සේ ටිකක් කල්පනා කරලා මම තීරණය කළා මට සයිට් එක ලෝඩ් වෙන එක හංගගෙන ඒ වෙනුවෙන් යමක් පෙන්නන්න ඕනේ කියලා, පේජ් එක සම්පුර්ණයෙන් ලෝඩ් උනාම ඒක සම්පුර්ණයෙන්ම ආගන්තුකයාට පෙන්නනවා කියලා. මට අවශ්‍ය දේ ටිකක් හොයලා, ස්ක්‍රිප්ට් කිහිපයක් හරස් කරලා, මගේම කියලා මෝස්තර ටිකක් එකතු කළාට පස්සේ මට අවශ්‍ය ප්‍රතිඵලය ලැබුණා. ගොඩබෑමේ පිටු නරඹන්නන් දැන් සම්පූර්ණයෙන්ම පටවා ඇති අන්තර්ගතය දැකීමට පෙර කුඩා ස්ප්ලෑෂ් තිරයක් දකී. ස්ක්‍රිප්ට් එක ක්‍රියා කරන්නේ එය මුලින්ම ලෝඩ් වී අපි සෙටින්ග්ස් වල සකසන දේ පෙන්වන ආකාරයටය.පේජ් එක ලෝඩ් වූ පසු බ්‍රවුසරය window.onload Event එකට කතා කරන අතර අපගේ script එක load වූ පිටුව පෙන්වයි.

එය මේ වගේ දෙයක් පෙනේ, පිටුව පූරණය වීමට වැඩි කාලයක් ගත වන තරමට, ස්ප්ලෑෂ් තිරය පෙන්වනු ඇත:

එවැනි පූර්ව පූරණයක් ඔබේ වෙබ් අඩවියට හෝ පිටුවට සම්බන්ධ කිරීම අපහසු නැත. ඔබේ අදහස ක්‍රියාත්මක කිරීමට ඔබ කළ යුතු පළමු දෙය නම්, ඇත්ත වශයෙන්ම, HTML සලකුණු කිරීම ඇතුළත් කිරීමයි. මෙය සිදු කළ හැකිය, උදාහරණයක් ලෙස, අඩවි ශීර්ෂය තුළ. එය ඕනෑම තැනක අලවන්න, වඩාත් සුදුසු වන්නේ විවෘත ශරීර ටැගයට පසුවය. මෙය p_prldr හැඳුනුම්පත සහිත ප්‍රධාන කොටස වන අතර, එය මුළු තිරයම පුරවන අතර පිටුව සම්පූර්ණයෙන්ම පූරණය වීමට පෙර අමුත්තා දකින ඕනෑම දෙයක් ඔබට තැබිය හැක. මෙම බ්ලොක් එක තුළ අපි පැටවීමේ සජීවිකරණය සහ පෙළ තබමු.

#p_prldr(ස්ථානය: ස්ථාවර; වම: 0; ඉහළ: 0; දකුණ: 0; පහළ: 0; පසුබිම: #9A12B3; z-දර්ශකය: 30;).contpre කුඩා(අකුරු ප්‍රමාණය: 25px;) .contpre( පළල : 250px; උස: 100px; ස්ථානය: නිරපේක්ෂ; වමේ: 50%; ඉහළ: 48%; ආන්තිකය-වම:-125px; ආන්තිකය-ඉහළ:-75px; වර්ණය:#fff; අකුරු ප්රමාණය: 40px; අකුරු පරතරය: -2px; text-align:center; line-height:35px;) #p_prldr .svg_anm (ස්ථානය: නිරපේක්ෂ; පළල: 41px; උස: 41px; පසුබිම: url(රූප/oval.svg) මධ්‍ය මධ්‍යයේ නැත-පුනරාවර්තනය; පසුබිම -size:41px; ආන්තිකය: -16px 0 0 -16px;)

svg_anm පන්තිය සහිත බ්ලොක් එකක් අපගේ සජීවිකරණයයි. මගේ preloader එකේ මම සජීවිකරණය සඳහා SVG ග්‍රැෆික්ස් භාවිතා කරනවා. එය මට අවශ්‍ය ප්‍රමාණයට පරිමාණය කළ හැකි අතර එය යථාර්ථවාදී සහ සිසිල් බව පෙනේ. ඔබට අවශ්ය නම්, ඔබට කිහිපයක් භාවිතා කළ හැකිය GIF සජීවිකරණයහෝ ස්ථිතික පින්තූරයක් පමණක්, ඒ සියල්ල ඔබගේ පරිකල්පනය මත රඳා පවතී. මා සතුව මෙම ගොනුව oval.svg ඇත, මම එහි ප්‍රමාණය පසුබිම-ප්‍රමාණය: 41px පරාමිතිය සමඟ සකසා ඇත; , ඔබ සජීවිකරණයේ ප්‍රමාණයට සමාන බ්ලොක් එකේ පළල සහ උසද සඳහන් කළ යුතුය. පළල: 41px; උස: 41px;

ඔබත් මෙවැනි සජීවිකරණ වලට කැමති නම්, ඔබට පහත ඒවායින් තෝරා ගත හැකිය, මෙය සිදු කිරීම සඳහා, අවශ්‍ය එක මත දකුණු-ක්ලික් කර එය අවශ්‍ය ෆෝල්ඩරයට සුරකින්න.

හොඳයි, සජීවිකරණ ම.

සජීවිකරණයේ පසුබිම අතින් සකසා ඇති අතර එය පෙර පූරණයේ ප්‍රධාන කොටසේ ඇති පරිදි ඔබට ලැබෙනු ඇත, සජීවිකරණයම සුදු ය, එබැවින් ඔබ එය බාගත කිරීමෙන් පසු එය විවෘත කළහොත් ඔබට කිසිවක් නොපෙනේ :) එබැවින් පසුව ඒවා එසේ නොවේ. එය වැඩ නොකරන බව ලියන්න.

සෑම දෙයක්ම ක්‍රියා කිරීම සඳහා, ඔබ පෙර පූරණ පිටපතම එකතු කළ යුතුය, නමුත් පළමුව ඔබ jQuery පුස්තකාලය සම්බන්ධ කර ඇති බවට සහතික විය යුතුය. මෙය සිදු නොකළේ නම්, වසා දැමීමේ හිසට පෙර ශීර්ෂයට හෝ වැසීමට පෙර පාදයට පහත පේළිය එක් කරන්න:

ඊට පසු, අපි ස්ක්‍රිප්ට් එකම ඇතුල් කරන්නෙමු.

$(කවුළුව).on("load", function () (var $preloader = $("#p_prldr"), $svg_anm = $preloader.find(".svg_anm"); $svg_anm.fadeOut(); $preloader .delay(500).fadeOut("slow"); ));

ඔබ ප්‍රධාන කොටසේ හැඳුනුම්පත සහ සජීවිකරණ කොටසේ පන්තිය වෙනස් කර නොමැති නම්, ඔබට ස්ක්‍රිප්ටයේ කිසිවක් වෙනස් කිරීමට අවශ්‍ය නොවේ. ඔබට වින්‍යාස කළ හැක්කේ එක් දෙයක් පමණි, එනම් පිටුව පෙන්වීමට පෙර ප්‍රමාදය. පිටුව පූරණය වන විට, සජීවිකරණ අවහිරය අතුරුදහන් වන අතර පිටුවේ අන්තර්ගතය සුමට ලෙස දිස්වනු ඇත, නමුත් ඔබට තවත් ප්‍රමාදයක් සැකසිය හැක. මෙම ස්ක්‍රිප්ට් එකේ, එය මිලි තත්පර 500 ට සමාන වේ, එනම් තත්පර භාගයක්, ඔබට එය අඩු කළ හැකිය, නැතහොත්, ඊට ප්‍රතිවිරුද්ධව, ඔබට එය අවශ්‍ය නම් එය වැඩි කරන්න.

සෑම දෙයක්ම නිවැරදිව සිදු කර ඇති අතර ප්රතිඵලය ඔබ සතුටු කළ යුතුය. ප්රධාන දෙය නම් ඉක්මන් නොවී උපදෙස් ප්රවේශමෙන් අනුගමනය කිරීමයි.

එපමණයි, ඔබේ අවධානයට ස්තූතියි. 🙂

පූර්ව පූරණ නිර්මාණය කිරීම ඉතා විලාසිතාවක් වී ඇත, මන්ද ඒවා අලංකාර ලෙස පෙනෙන අතර වඩාත්ම වැදගත් දෙය නම්, වෙබ් අඩවිය තවමත් පූරණය වන අතරතුර එය හැර නොයන ලෙස පරිශීලකයාට බල කිරීමයි.

වෙබ් අඩවියක් සඳහා පූර්ව පූරණයක් සාදා ගන්නේ කෙසේද?

ඔබ භාවිතා කරන්නේ නම් පෙර පූරණය තත්පර කිහිපයකින් සෑදිය හැකිය සූදානම් කළ විසඳුම්හෝ මිනිත්තු කිහිපයකින්, ඔබ මුල සිටම සියල්ල ලියන්නේ නම් :)

නමුත් අපි දේවල් පිළිවෙලට ගනිමු ...

බ්රවුසරයේ සාරය වන්නේ එය පියවරෙන් පියවර කේතය පෙන්වයි. මෙයින් අදහස් කරන්නේ බ්‍රව්සරය ඉහළ සිට පහළට සියලුම කේතය හරහා යන අතර, කේතයේ මධ්‍යයේ කොතැනක හෝ අධික JS ස්ක්‍රිප්ට් හමු වුවහොත්, මෙම අවස්ථාවේදී වෙබ් අඩවිය ටිකක් කැටි වන බවයි.

Preloader එය සාදන අතර එමඟින් අපි වෙබ් අඩවියේ සියලුම අන්තර්ගතයන් සඟවා එය සම්පූර්ණයෙන්ම ප්‍රදර්ශනය කරන්නේ මුළු වෙබ් අඩවියම සියලුම ස්ක්‍රිප්ට් සහ මෝස්තරවලින් පටවා ඇති විට පමණි.

පූර්ව පූරණය ක්‍රියා කරන ආකාරය පිළිබඳ කෙටි රූප සටහන:

• විවෘත ශරීර ටැගය අවසන් වූ වහාම අපි පෙර පූරණයක් සමඟ div එකක් තබමු;
• පූර්ව පූරණය සක්රිය කර සියලු පිටු අන්තර්ගතයන් සඟවන්න;
• පිටුව පූරණය කිරීමෙන් පසු, පූර්ව පූරණය ඉවත් කර වෙබ් අඩවිය පෙන්වන්න.

දැන් අපි code එක බලමු. මුලදී ඔබට පෙර පූරණයක් සමඟ div එකක් තැබිය යුතුය, මේ වගේ දෙයක්:

AreaForLoader (පසුබිම: රේඛීය-ශ්‍රේණිය(90deg, #FF4E50 10%, #F9D423 90%); පිටාර ගැලීම: සැඟවුණු; ස්ථානය: ස්ථාවර; වම: 0; ඉහළ: 0; දකුණ:0; පහළ:0; z-දර්ශකය: 9999 ;)

ඔබ කළ යුතු අවසාන දෙය නම් පූර්ව පූරණය සැඟවීමයි. මෙය සිදු කිරීම සඳහා, ඔබට පහත jQuery කේතය භාවිතා කළ හැකිය:

$(කවුළුව).on("පූරණය", ශ්‍රිතය () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. delay(350).fadeOut("slow"); ));

මූලික වශයෙන්, ඔබ කළ යුත්තේ ඔබේ පූර්ව පූරණය කරන්නන්ට හොඳ සජීවිකරණ කිහිපයක් එක් කිරීමයි. එසේම, මට පෙර පූරණය කරන්නන් පිළිබඳ රසවත් උදාහරණ කිහිපයක් හමු විය, එබැවින් ඔබට ඒවා පරීක්ෂා කිරීමට අවශ්‍ය විය හැකිය:

ප්ලගීන භාවිතයෙන් පූර්ව පූරණයක් නිර්මාණය කිරීම

Preloaders සහ loading bars නිර්මාණය කිරීමට වෙනත් ක්‍රමද ඇත. උදාහරණයක් ලෙස, ඔබට අලංකාර පැටවුම් තීරුවක් සෑදීමට විශේෂ NProgress.js ප්ලගිනය භාවිතා කළ හැකිය, නැතහොත් පූර්ව පූරණ නිර්මාණකරු භාවිතා කරන්න.

පූර්ව පූරණයක් නිර්මාණය කිරීම පිළිබඳ වීඩියෝ නිබන්ධනයේ මෙම කරුණු දෙක මනාව විස්තර කර ඇත, එබැවින් මෙම වීඩියෝ නිබන්ධනය නැරඹීමට මම ඔබට උපදෙස් දෙමි:

Preloader $(document).ready(function () ( NProgress.start (); NProgress.set (0.4); setTimeout(function () (NProgress.done (); 4000); )); #hellopreloader>p(display:none;)#hellopreloader_preload(display: block;position: fixed;z-index: 99999; top: 0; left: 0;width: 100%;height: 100%;min-width: 1000px ;පසුබිම: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) මධ්‍ය මධ්‍යස්ථානය no-repeat;background-size:131px;)

Hello-Site.ru. නොමිලේ වෙබ් අඩවි සාදන්නා.

var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function())(el.style.opacity = el.style.05; - 0. නම් (el.style.opacity