Tải trước JS, nhưng đừng chạy nó

Tôi muốn tải trước một tệp JS lớn sau khi trang đã tải, để khi tôi liên kết đến tệp JS đó trên trang yêu cầu, nó đã được tải xuống và lưu vào bộ nhớ cache.Tải trước JS, nhưng đừng chạy nó

tôi về cơ bản làm điều này vào lúc này, và nó hoạt động, nhưng tất nhiên nó không phải là đúng cách:

preload_js = new Image(); 
preload_js = "http://domain.com/files/file.js";

này dường như là một phương pháp nhanh chóng và đơn giản như vậy, không cần thiết Ajax vv và nó hoạt động tốt.

Cách thích hợp để thực hiện việc này là gì? Chắc chắn không phải với Ajax như có vẻ quá mức cần thiết cho việc này.

Tôi biết có rất nhiều phương pháp để tải JS nhưng tất cả dường như thực sự chạy mã sau khi tập lệnh đã tải, mà tôi không muốn.

Tôi không muốn sử dụng jQuery (hoặc bất kỳ thư viện nào), nó phải là JS đơn giản. Cảm ơn vì bất kì sự giúp đỡ.

Nguồn

2013-05-17 user2143356

Tôi nghi ngờ không có giải pháp "sạch hơn". Câu hỏi hay. Nice hack. –

Bạn có thể chỉ quấn mã của mình vào một khai báo hàm mà bạn có thể gọi khi cần thiết và đưa mã đó vào một thẻ '

Từ this blog post:

linh kiện Nạp trước trước là tốt cho hiệu suất. Có một số cách để thực hiện. Nhưng ngay cả giải pháp sạch nhất (mở ra khung nội tuyến và phát điên) có giá - giá của iframe và giá phân tích cú pháp và thực thi CSS được tải trước và JavaScript. Ngoài ra còn có nguy cơ tương đối cao về các lỗi JavaScript có thể xảy ra nếu tập lệnh bạn tải trước giả định rằng nó được tải trong trang khác với trang tải trước.

Sau một chút thử thách và rất nhiều lỗi tôi nghĩ rằng tôi đã đưa ra một cái gì đó mà có thể làm việc qua trình duyệt:

trong IE sử dụng new Image().src để tải trước tất cả các loại thành phần

trong tất cả các trình duyệt khác sử dụng thẻ <object> động

Trong ví dụ này, tôi giả sử trang tìm nạp trước sau khi tải một số thành phần cần thiết cho trang tiếp theo. Các thành phần là CSS, JS và PNG (sprite).
window.onload = function() { 

    var i = 0, 
     max = 0, 
     o = null, 

     // list of stuff to preload 
     preload = [ 
      'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png', 
      'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js', 
      'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css' 
     ], 
     isIE = navigator.appName.indexOf('Microsoft') === 0; 

    for (i = 0, max = preload.length; i < max; i += 1) { 

     if (isIE) { 
      new Image().src = preload[i]; 
      continue; 
     } 
     o = document.createElement('object'); 
     o.data = preload[i]; 

     // IE stuff, otherwise 0x0 is OK 
     //o.width = 1; 
     //o.height = 1; 
     //o.style.visibility = "hidden"; 
     //o.type = "text/plain"; // IE 
     o.width = 0; 
     o.height = 0; 


     // only FF appends to the head 
     // all others require body 
     document.body.appendChild(o); 
    } 

}; 

Xem the post để biết thêm chi tiết.

EDIT: Nhìn vào bình luận trên bài đăng đó, ai đó đề cập this link, mà nói về những vấn đề với phương pháp new Image() tải trước trong IE và các trình duyệt khác. Dưới đây là một đoạn trích:

Khi IE gặp một thẻ IMG, nó tạo đối tượng hình ảnh và gán yêu cầu tải xuống cho nó. Khi dữ liệu đến từ tải xuống hình ảnh, được đưa vào bộ giải mã hình ảnh của trình duyệt. Bộ giải mã sẽ từ chối dữ liệu không đúng định dạng nếu bạn cung cấp cho chúng bản rõ, có vẻ hợp lý, vì chúng không thể sử dụng dữ liệu đó.Khi bộ giải mã từ chối dữ liệu dưới dạng "Không thể là hình ảnh", đối tượng hình ảnh sẽ hủy bỏ quá trình xử lý của nó. Là một phần của việc hủy bỏ đó, nếu quá trình tải xuống chưa hoàn thành , quá trình này cũng bị hủy.

Điều này giải thích hành vi được đề cập trong OP trong nhận xét bên dưới (IE9 chỉ tải xuống 4KB của tệp).

Nó có vẻ như lựa chọn duy nhất qua trình duyệt đáng tin cậy của bạn có thể sử dụng Ajax ...

Nguồn

2013-05-17 05:37:18

Tôi đã không chấp nhận câu trả lời vì tôi đã gặp phải các vấn đề lớn. Mã vì nó gây ra các vấn đề trên iPhone và IE9 (và tôi chưa thực sự thử nghiệm nhiều hơn thế này). IPhone mất tuổi để tải (sử dụng phương thức trong mã) và thích phương thức mà mã sử dụng cho IE (sau đó hoạt động tốt). IE9 chỉ tải về 4k của tập tin, đó là vô dụng. Cảm ơn bạn đã chỉ ra giải pháp nhưng nó không thể sử dụng được. – user2143356

Ok, có vẻ như AJAX là cần thiết. Vấn đề là tất cả các tên miền chéo này. Tất cả các tệp JS đều có trên CDN, bao gồm jQuery được lưu trữ bởi Google CDN, nhưng tôi vẫn gặp phải vấn đề về miền chéo. Tôi đã đọc trên JSONP nhưng mọi người cứ nói về callbacks. Tôi chỉ muốn tải trước một tệp. Ví dụ image.src nhanh và đơn giản (nếu nó hoạt động!). Có một tham số đơn giản để thêm vào Ajax của tôi? Tôi đang sử dụng một kịch bản lệnh vanilla Ajax cơ bản. – user2143356

SỬ DỤNG

window.document.onload =function(){ 
preload_js = "http://domain.com/files/file.js"; 
}

window.document.onload chắc chắn kịch bản java sẽ không chạy cho đến khi bạn DOM đã sẵn sàng

Nguồn

2013-05-17 06:18:03

Điều này hoàn toàn hiểu nhầm câu hỏi. – slebetman

Các vấn đề liên quan