আমি একটি <script>অভ্যন্তর ব্যবহার করে একটি বাহ্যিক স্ক্রিপ্ট সম্পাদন করছি <head>।
পৃষ্ঠাটি লোড হওয়ার আগে স্ক্রিপ্টটি কার্যকর করার পরে, আমি <body>অন্যান্য জিনিসগুলির মধ্যেও অ্যাক্সেস করতে পারি না । দস্তাবেজটি "লোড" হয়ে যাওয়ার পরে (এইচটিএমএল পুরোপুরি ডাউনলোড এবং ইন-র্যাম) হয়ে যাওয়ার পরে আমি কিছু জাভাস্ক্রিপ্ট কার্যকর করতে চাই। আমার স্ক্রিপ্ট কার্যকর হলে আমি কী এমন কোনও ইভেন্টের প্রতি ঝুঁকিতে পড়তে পারি, যা পৃষ্ঠা লোডে ট্রিগার হয়ে উঠবে?
উত্তর:
এই সমাধানগুলি কাজ করবে:
<body onload="script();">অথবা
document.onload = function ...অথবা এমনকি
window.onload = function ...মনে রাখবেন যে সর্বশেষ বিকল্পটি উত্তমরূপে যাওয়ার একটি ভাল উপায় কারণ এটি নিরঙ্কুশ এবং এটি আরও মানক হিসাবে বিবেচিত ।
document.onload=অ জেদী হয় en.wikipedia.org/wiki/Unobtrusive_JavaScript
যুক্তিসঙ্গতভাবে বহনযোগ্য, আপনার স্ক্রিপ্টটি লোডের সময় চালানোর জন্য কোনও ফাংশন সেট করার উপায়:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}স্টাইলশিট, চিত্র এবং সাবফ্রেমগুলি লোডিং শেষ করার জন্য অপেক্ষা না করে প্রাথমিক HTML ডকুমেন্টটি পুরোপুরি লোড এবং পার্স করা হয়ে গেলে এই ইভেন্টটি বহিস্কার করা হয় । এই পর্যায়ে আপনি ব্যবহারকারীর ডিভাইস বা ব্যান্ডউইথ গতির উপর ভিত্তি করে চিত্র এবং সিএসএস লোডকে প্রোগ্রামগতভাবে অনুকূল করতে পারেন।
ডিওএম লোড হওয়ার পরে কার্যকর করা হয় (আইএমজি এবং সিএসএসের আগে):
document.addEventListener("DOMContentLoaded", function(){
//....
});দ্রষ্টব্য: সিঙ্ক্রোনাস জাভাস্ক্রিপ্ট ডিওএমের বিশ্লেষণ বিরতি দেয়। ব্যবহারকারী যদি পৃষ্ঠার অনুরোধ করার পরে আপনি যদি ডমকে যত তাড়াতাড়ি পার্সিং করতে চান তবে আপনি নিজের জাভাস্ক্রিপ্ট অ্যাসিঙ্ক্রোনাস ঘুরিয়ে নিতে পারেন এবং স্টাইলশিট লোড করতে অনুকূলিত করতে পারেন
একটি সম্পূর্ণ ভিন্ন ইভেন্ট, লোড , কেবলমাত্র একটি সম্পূর্ণ লোডযুক্ত পৃষ্ঠা সনাক্ত করতে ব্যবহার করা উচিত । লোড ব্যবহার করা এটি একটি অবিশ্বাস্যরকম জনপ্রিয় ভুল যেখানে ডমকন্টেন্টলয়েড আরও বেশি উপযুক্ত হবে, তাই সাবধান হন।
সবকিছু লোড এবং পার্স করার পরে এক্সিকিউটিস:
window.addEventListener("load", function(){
// ....
});MDN সংস্থানসমূহ:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
সমস্ত ইভেন্টের MDN তালিকা:
window.onload = ...ভেবে চেষ্টা করেছি যে আমার স্ক্রিপ্টটি চলার আগে সবকিছু পুরোপুরি ডাউনলোড না হওয়া পর্যন্ত অপেক্ষা করবে তবে window.onloadবাস্তবে এটির মতো আচরণ করা হয় document.addEventListener("DOMContentLoaded", ..., অন্যদিকে window.addEventListener("load", ...সত্যিকার অর্থে সবকিছু পুরোপুরি ডাউনলোড হওয়ার অপেক্ষা রাখে না। আমি ভাবতাম যে এর চেয়ে window.onloadসমান হওয়া উচিত ?? আমি ক্রোম এবং এফএফ একই ফলাফল পেয়েছি। window.addEventListener("load", ...document.addEventListener("DOMContentLoaded", ...
আপনি শরীরের অভ্যন্তরে একটি "অনলোড" বৈশিষ্ট্য রাখতে পারেন
...<body onload="myFunction()">...বা আপনি যদি jQuery ব্যবহার করছেন তবে আপনি এটি করতে পারেন
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })আমি এটি আপনার প্রশ্নের উত্তর আশা করি।
নোট করুন যে আপনার পৃষ্ঠায় ডকুমেন্টটি রেন্ডার করার পরে $ (উইন্ডো)। লোড কার্যকর হবে।
যদি স্ক্রিপ্টগুলি <head>নথির মধ্যে লোড করা থাকে , তবে deferস্ক্রিপ্ট ট্যাগে বৈশিষ্ট্যটি ব্যবহার করা সম্ভব ।
উদাহরণ:
<script src="demo_defer.js" defer></script>Https://developer.mozilla.org থেকে :
মুলতবি করা
এই বুলিয়ান বৈশিষ্ট্যটি কোনও ব্রাউজারকে নির্দেশ করতে সেট করা হয়েছে যে ডকুমেন্টটি বিশ্লেষণের পরে স্ক্রিপ্টটি কার্যকর করা হয়েছিল, তবে DOMContentLoade গুলি চালানোর আগে।
এসসিআর অ্যাট্রিবিউটটি অনুপস্থিত থাকলে (যেমন ইনলাইন স্ক্রিপ্টগুলির জন্য) এই বৈশিষ্ট্যটি ব্যবহার করা উচিত নয়, এক্ষেত্রে এর কোনও প্রভাব নেই।
গতিশীল inোকানো স্ক্রিপ্টগুলির জন্য অনুরূপ প্রভাব অর্জন করতে এর পরিবর্তে async = মিথ্যা ব্যবহার করুন। ডিফার অ্যাট্রিবিউটযুক্ত স্ক্রিপ্টগুলি ডকুমেন্টে প্রদর্শিত হয় সেই ক্রমে কার্যকর হবে।
পৃষ্ঠাটি লোড হওয়ার পরে স্থগিত জেএস লোডের উপর ভিত্তি করে এখানে একটি স্ক্রিপ্ট রয়েছে,
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>আমি এটি কোথায় রাখব?
</body>ট্যাগের ঠিক আগে (আপনার HTML ফাইলের নীচে) আপনার এইচটিএমএলে কোড আটকান ।
এটার কাজ কি?
এই কোডটি বলে যে পুরো দস্তাবেজটি লোড হওয়ার জন্য অপেক্ষা করুন, তারপরে বাহ্যিক ফাইলটি লোড করুন
deferredfunctions.js।
উপরের কোডটির উদাহরণ এখানে - জেএসের রেন্ডারিং ডিফার করুন
আমি জাভাস্ক্রিপ্ট পৃষ্ঠা স্পিড গুগল ধারণাটি পরাজিত লোড উপর ভিত্তি করে এটি লিখেছি এবং এই নিবন্ধ থেকে উত্সাহিত জাভাস্ক্রিপ্ট লোড লোড ডিফার
হুকিং document.onloadবা jQuery এ দেখুন $(document).load(...)।
ওয়ার্কিং ফিডল চালু আছে<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
আপনি যদি jQuery ব্যবহার করছেন,
$(function() {...});
সমতুল্য
$(document).ready(function () { })
বা অন্য ছোট হাত:
$().ready(function () { })
দেখুন কি ইভেন্ট জিকুয়ারি $ ফাংশন করে () জ্বালিয়ে দেয়? এবং https://api.jquery.com/ تیار/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}এখানে দেখুন: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
আমি কখনও কখনও আরও জটিল পৃষ্ঠাগুলিতে খুঁজে পাই যা সমস্ত উপাদান সময় উইন্ডো দ্বারা লোড হয় না on যদি এটি হয় তবে আপনার ফাংশনটি বিলম্বিত করার আগে সেটটাইমআউট যুক্ত করুন একটি মুহুর্ত। এটি মার্জিত নয় তবে এটি একটি সহজ হ্যাক যা ভালভাবে সরবরাহ করে।
window.onload = function(){ doSomethingCool(); };হয়ে ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };কেবল <body onload="aFunction()">পৃষ্ঠাটি লোড হওয়ার পরে ডাকা হবে তা নির্ধারণ করুন । স্ক্রিপ্টে আপনার কোডটি এর চেয়ে বেশি সংযুক্ত aFunction() { }।
<body onload="myFunction()">এই কোডটি ভাল কাজ করে।
তবে window.onloadপদ্ধতির বিভিন্ন নির্ভরতা রয়েছে। সুতরাং এটি সবসময় কাজ নাও করতে পারে।
YUI গ্রন্থাগার ব্যবহার করে (আমি এটি পছন্দ করি):
YAHOO.util.Event.onDOMReady(function(){
//your code
});পোর্টেবল এবং সুন্দর! তবে, আপনি যদি অন্য জিনিসগুলির জন্য YUI ব্যবহার না করেন (এর ডকটি দেখুন) আমি বলব এটি ব্যবহার করার পক্ষে এটি উপযুক্ত নয়।
নোট: এই কোডটি ব্যবহার করতে আপনার 2 টি স্ক্রিপ্ট আমদানি করতে হবে
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>জাভাস্ক্রিপ্ট বা জ্যাকুরি ব্যবহার করে দস্তাবেজটি লোড হয়েছে কিনা তা কীভাবে সনাক্ত করতে হবে সে সম্পর্কে একটি খুব ভাল ডকুমেন্টেশন রয়েছে ।
নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করে এটি অর্জন করা যায়
if (document.readyState === "complete") {
init();
}এটি ব্যবধানের ভিতরেও করা যেতে পারে
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}জ্যাকুরি ব্যবহার করে কেবল ডিওএম প্রস্তুত কিনা তা পরীক্ষা করতে
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});সমস্ত সংস্থান লোড হয়েছে কিনা তা পরীক্ষা করতে উইন্ডো.লোডটি ব্যবহার করুন
$( window ).load(function() {
console.log( "window loaded" );
});JQuery লাইব্রেরি সহ এই কোডটি ব্যবহার করুন, এটি পুরোপুরি সূক্ষ্মভাবে কাজ করবে।
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ডিডি () আমার পক্ষে সবচেয়ে ভাল কাজ করে।
$(document).ready(function(){ ... });। লোড () কাজ করবে তবে পৃষ্ঠাটি লোড না হওয়া পর্যন্ত এটি অপেক্ষা করবে না।
jQuery(window).load(function () { ... });আমার জন্য কাজ করে না, পরের থেকে ইনলাইন স্ক্রিপ্টটি ভেঙে দেয়। আমি jQuery 3.2.1 এছাড়াও কিছু অন্যান্য jQuery কাঁটাচামচ ব্যবহার করছি।
আমার ওয়েবসাইটগুলি লোডিং ওভারলেটি লুকানোর জন্য, আমি নিম্নলিখিতগুলি ব্যবহার করি:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});দ্রষ্টব্য: - নীচের মার্কআপটি ব্যবহার করবেন না (কারণ এটি অন্যান্য একই ধরণের ঘোষণাগুলিকে ওভাররাইট করে):
document.onreadystatechange = ...ড্যানিয়েল যেমন বলেছেন, আপনি ডকুমেন্ট.অনলোড ব্যবহার করতে পারেন।
বিভিন্ন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি (jQuery, Mootools, ইত্যাদি) একটি কাস্টম ইভেন্ট 'ডোমড্রিড' ব্যবহার করে, যা আমার ধারণা বেশি কার্যকর হতে হবে। আপনি যদি জাভাস্ক্রিপ্টের সাহায্যে বিকাশ করছেন, আমি একটি ফ্রেমওয়ার্কটি শোষণ করার জন্য সুপারিশ করব, তারা আপনার উত্পাদনশীলতা ব্যাপকভাবে বৃদ্ধি করবে।
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>asnycস্ক্রিপ্ট ট্যাগের জন্য আমার পরামর্শ ব্যবহারের গুণাবলী আপনাকে পৃষ্ঠা লোডের পরে বাহ্যিক স্ক্রিপ্টগুলি লোড করতে সহায়তা করে
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>deferপরিবর্তে সম্ভবত আপনি বোঝাতে চেয়েছিলেন, যেমন @ ড্যানিয়েল দামের কথা বলা হয়েছে?
স্ব সম্পাদন অনলোড ফাইলটি ব্যবহার করুন
window.onload = function (){
/* statements */
}(); onloadএই পদ্ধতিকে ব্যবহার করে অন্যান্য হ্যান্ডলারের ওভাররাইড করতে পারেন । পরিবর্তে, আপনার শ্রোতা যুক্ত করা উচিত।