diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md index 590e54ab4..14a53dbfa 100644 --- a/2-ui/5-loading/03-onload-onerror/article.md +++ b/2-ui/5-loading/03-onload-onerror/article.md @@ -1,17 +1,17 @@ -# Resource loading: onload and onerror +# রিসোর্স লোডিং: onload এবং onerror -The browser allows us to track the loading of external resources -- scripts, iframes, pictures and so on. +আমরা এক্সটার্নাল রিসোর্স লোডিং স্টেটও ট্র্যাক করতে পারি, যেমন scripts, iframes, pictures ইত্যাদি। -There are two events for it: +এজন্য দুটি ইভেন্ট আছে: -- `onload` -- successful load, -- `onerror` -- an error occurred. +- `onload` -- লোড সাকসেস হলে, +- `onerror` -- যদি কোন এরর সংগঠিত হয়। -## Loading a script +## script লোডিং -Let's say we need to load a third-party script and call a function that resides there. +মনে করুন আমরা একটি থার্ড-পার্টি লাইব্রেরী লোড করব এবং ঐ লাইব্রেরীর কোন একটি ফাংশন কল করব। -We can load it dynamically, like this: +আমরা এটি ডায়নামিক্যালি লোড করব, এভাবে: ```js let script = document.createElement('script'); @@ -20,42 +20,42 @@ script.src = "my.js"; document.head.append(script); ``` -...But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it. +...এখন আমরা কিভাবে ফাংশনটি ডিক্লেয়ার করব? এক্ষেত্রে, আমাদের অবশ্যই লাইব্রেরীটি লোড হওয়া পর্যন্ত অপেক্ষা করতে হবে, অন্যথায় আমরা এটিকে কল করতে চাইলে এরর হবে। ```smart -For our own scripts we could use [JavaScript modules](info:modules) here, but they are not widely adopted by third-party libraries. +আমাদের নিজস্ব script এর জন্য [JavaScript modules](info:modules) ব্যবহার করতে পারি, তবে এখানে আমরা একটি স্বতন্ত্র থার্ড-পার্টি লাইব্রেরী লোড করতে চাচ্ছি। ``` ### script.onload -The main helper is the `load` event. It triggers after the script was loaded and executed. +এক্ষেত্রে আমরা `load` ইভেন্ট এর সহায়তা নিতে পারি। কেননা script টি লোড হয়ে এক্সিকিউট হলে `load` ইভেন্টটি ট্রিগার হয়। -For instance: +উদাহরণস্বরূপ: ```js run untrusted let script = document.createElement('script'); -// can load any script, from any domain +// এখানে যেকোন script লোড করতে পারি script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js" document.head.append(script); *!* script.onload = function() { - // the script creates a variable "_" - alert( _.VERSION ); // shows library version + // স্ক্রিপ্ট টি একটি ভ্যারিয়েবল তৈরি করে "_" + alert( _.VERSION ); // লোডেশ এর ভার্সন দেখাবে }; */!* ``` -So in `onload` we can use script variables, run functions etc. +সুতরাং আমরা `onload` হ্যান্ডেলারে script টির বিভিন্ন ভ্যারিয়েবল, ফাংশন ব্যবহার করতে পারব। -...And what if the loading failed? For instance, there's no such script (error 404) or the server is down (unavailable). +...যদি আমাদের কোন কারণে লোডিং না হয় তাহলে কি হবে? মনে করুন, আমরা কোন একটি ভুল রিসোর্স লোড করতে চাচ্ছি (error 404) অথবা রিমোট সার্ভারটি ডাউন হয়েছে (unavailable)। ### script.onerror -Errors that occur during the loading of the script can be tracked in an `error` event. +এক্ষেত্রে script কোন কারণে লোড না হলে `error` ইভেন্টটি ট্রিগার হয়। -For instance, let's request a script that doesn't exist: +যেমন, এখানে আমরা একটি script লোড করতে চাচ্ছি যেটি একটি 404 পেজ: ```js run let script = document.createElement('script'); @@ -69,19 +69,19 @@ script.onerror = function() { */!* ``` -Please note that we can't get HTTP error details here. We don't know if it was an error 404 or 500 or something else. Just that the loading failed. +দয়া করে মনে রাখুন এখানে আমরা HTTP error এর বিস্তারিত জানতে পারব না। যেকোন কারণে এরর সংগঠিত হতে যেমন 404 বা 500 অথবা অন্য যেকোন কারণে। তবে এটি শুধু `error` ইভেন্টটি ট্রিগার করে। ```warn -Events `onload`/`onerror` track only the loading itself. +`onload`/`onerror` ইভেন্ট শুধুমাত্র লোডিং স্টেটকে ট্র্যাক করতে পারে। -Errors that may occur during script processing and execution are out of scope for these events. That is: if a script loaded successfully, then `onload` triggers, even if it has programming errors in it. To track script errors, one can use `window.onerror` global handler. +তবে script এর মধ্যে কোন এরর থাকা সত্বেও script লোড হতে পারে। script এর মধ্যে কোন এরর থাকা সত্বেও `load` ইভেন্ট টি ট্রিগার হবে। যদি আমরা script এর error ট্র্যাক করতে চায় তাহলে `window.onerror` গ্লোবাল হ্যান্ডেলারের সহায়তা নিতে পারি। ``` -## Other resources +## অন্যান্য রিসোর্স -The `load` and `error` events also work for other resources, basically for any resource that has an external `src`. +অন্যান্য যেসব এলিমেন্ট এক্সটার্নাল রিসোর্স লোড করতে পারে তাদের জন্যও `load` এবং `error` কাজ করবে। -For example: +যেমন: ```js run let img = document.createElement('img'); @@ -96,30 +96,26 @@ img.onerror = function() { }; ``` -There are some notes though: +তবে কিছু ব্যতিক্রম বৈশিষ্ট্য আছে: -- Most resources start loading when they are added to the document. But `` is an exception. It starts loading when it gets a src `(*)`. -- For `