Cách load file js (Javascript) sau khi trang tải xong


Một nguyên tắc khi chúng ta sắp sếp thứ tự các file JS (Javascript) thông thường cần phải theo thứ tự nhất định. Trình duyệt sau khi tải bản mã HTML về sẽ render các file scripts theo thứ tự từ trên xuống. Vì vậy khi nhúng các file JS vào ta thường phải đặt chúng theo tự như sau:

VD: Đối với Jquery

Thư viện Jquery => Các Jquery Plugin => Script chứa các đoạn code Jquery

Theo thứ tự chúng ta đặt đúng giống như là đoạn mã sau:

<html>
  <head>
    <title>Defer Demo</title>    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Vậy nếu xảy ra tình huống đặt file script.js trước file thư viện thì sao? 

Kết quả là chúng ta sẽ gặp lỗi trong console của trình duyệt.

script.js:1 Uncaught ReferenceError: $ is not defined
at script.js:1

Cách load file js (Javascript)

Để khắc phục vấn đề này thì trong thẻ tag <script> các bạn thêm thuộc tính defer. Khi sử dụng defer, nó sẽ báo cho trình duyệt là script này chỉ được load khi trang web đã tải và render hoàn thành.

Chú ý: 

  • Nó chỉ có tác dụng với thẻ tag <script> sử dụng src để nhúng file js, chứ ko làm có tác dụng khi viết trực tiếp code javascript vào trong
  • Nó là một thuộc tính boolean và đứng 1 mình.

Sau khi thêm defer chúng ta hoàn toàn có thể sử dụng đoạn code mà ko cần phải theo 1 thứ tự nữa.

<script type="text/javascript" src="script.js" defer></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Ngoài ra với nếu bạn sử dụng jQuery thì có 1 cách khác đó là sử dụng đoạn code jQuery sau để load file script.js sau khi trang web render thành công.

$.getScript("scripts.js", function(){
   alert("Script loaded and executed.");
});

Tuy nhiên cách sử dụng defer vẫn đơn giản phải không?

Nguồn: vinasupport.com

             
SHARE

Bài viết liên quan

mode_edit Bình luận của bạn

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

account_circle
web