TopGit theo dõi filamentgroup/loadCSS trên GitHub, đã đạt 6.6k sao. Load CSS asynchronously
Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.
VÌ SAO CHƯA CÓ REVIEW
TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.
:warning: This project is archived and the repository is no longer maintained.
loadCSS
A pattern for loading CSS asynchronously
[c]2020 @scottjehl, @zachleat Filament Group, Inc.
Licensed MIT
Why an ansychronous CSS loader?
Referencing CSS stylesheets with link[rel=stylesheet] or @import causes browsers to delay page rendering while a stylesheet loads. When loading stylesheets that are not critical to the initial rendering of a page, this blocking behavior is undesirable. The pattern below allows us to fetch and apply CSS asynchronously. If necessary, this repo also offers a separate (and optional) JavaScript function for loading stylesheets dynamically.
How to use
As a primary pattern, we recommend loading asynchronous CSS like this from HTML:
This article explains why this approach is best: https://www.filamentgroup.com/lab/load-css-simpler/
That is probably all you need! But if you want to load a CSS file from a JavaScript function, read on...
Dynamic CSS loading with the loadCSS function
The loadCSS.js file exposes a global loadCSS function that you can call to load CSS files programmatically, if needed. This is handy for cases where you need to dynamically load CSS from script.
loadCSS( "path/to/mystylesheet.css" );
The code above will insert a new CSS stylesheet linkafter the last stylesheet or script that it finds in the page, and the function will return a reference to that link element, should you want to reference it later in your script. Multiple calls to loadCSS will reference CSS files in the order they are called, but keep in mind that they may finish loading in a different order than they were called.
Function API
The loadCSS function has 3 optional arguments.
before: By default, loadCSS attempts to inject the stylesheet link after all CSS and JS in the page. However, if you desire a more specific location in your document, such as before a particular stylesheet link, you can use the before argument to specify a particular element to use as an insertion point. Your stylesheet will be inserted before the element you specify. For example, here's how that can be done by simply applying an id attribute to your script.
<head>
...
<script id="loadcss">
// load a CSS file just before the script element containing this code
loadCSS( "path/to/mystylesheet.css", document.getElementById("loadcss") );
</script>
...
</head>
media: You can optionally pass a string to the media argument to set the media="" of the stylesheet - the default value is all.
attributes: You can also optionally pass an Object of attribute name/attribute value pairs to set on the stylesheet. This can be used to specify Subresource Integrity attributes:
Onload event support for link elements is spotty in some browsers, so if you need to add an onload callback, include onloadCSS function on your page and use the onloadCSS function:
var stylesheet = loadCSS( "path/to/mystylesheet.css" );
onloadCSS( stylesheet, function() {
console.log( "Stylesheet has loaded." );
});
Browser Support
The loadCSS patterns attempt to load a css file asynchronously in any JavaScript-capable browser. However, some older browsers such as Internet Explorer 8 and older will block rendering while the stylesheet is loading. This merely means that the stylesheet will load as if you referenced it with an ordinary link element.
Changes in version 3.0 (no more preload polyfill)
As of version 3.0, we no longer support or include a polyfill for a rel=preload markup pattern. This is because we have since determined that the markup pattern described at the top of this readme is simpler and better for performance, while the former preload pattern could sometimes conflict with resource priorities in ways that aren't helpful for loading CSS in a non-blocking way.
To update, you can change your preload markup to this HTML pattern and delete the JS from your build.
Since this change breaks the API from prior versions, we made it a major version bump. That way, if you are still needing to use the now-deprecated preload pattern, you can keep your code pointing at prior versions that are still on NPM, such as version 2.1.0 https://github.com/filamentgroup/loadCSS/releases/tag/v2.1.0
Contributions and bug fixes
Both are very much appreciated - especially bug fixes. As for contributions, the goals of this project are to keep things very simple and utilitarian, so if we don't accept a feature addition, it's not necessarily because it's a bad idea. It just may not meet the goals of the project. Thanks!
Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/filamentgroup/loadCSS là nguồn chính thức.
filamentgroup/loadCSS có bao nhiêu sao?
filamentgroup/loadCSS có 6.6k sao GitHub — tải lại trang để xem số mới nhất, hoặc xem trực tiếp github.com/filamentgroup/loadCSS. TopGit phản chiếu số sao của GitHub nhưng không cam kết đến từng phút.
filamentgroup/loadCSS có tag gì không?
Bản đồng bộ chưa ghi nhận topic GitHub nào cho filamentgroup/loadCSS. GitHub topics hiển thị ở thanh bên phải trang repo — đó là nơi đáng kiểm tra nhất.
filamentgroup/loadCSS có website riêng không?
TopGit chưa ghi nhận URL trang chủ cho filamentgroup/loadCSS. Phần README ở tab phía trên thường có link demo, hoặc xem mô tả GitHub của repo.
filamentgroup/loadCSS còn đang phát triển không?
Commit gần nhất trên filamentgroup/loadCSS là 3.8 năm trước (theo timestamp GitHub). Repo có 519 fork — một chỉ báo về mức độ quan tâm của cộng đồng.
filamentgroup/loadCSS dùng license gì?
filamentgroup/loadCSS phát hành theo license MIT. Nên mở file LICENSE trên GitHub để xác nhận — license metadata đôi khi lệch với thực tế dự án.
filamentgroup/loadCSS viết bằng ngôn ngữ gì?
filamentgroup/loadCSS chủ yếu viết bằng JavaScript. Trường "language" của GitHub dựa trên phần lớn byte ở nhánh mặc định.
Đọc đầy đủ README ở tab phía trên.
Vẫn đang phân vân về loadCSS?
Một cú bấm sẽ gửi câu hỏi kèm trang này cho AI — xem AI nói gì về loadCSS.
/loadCSS