Đôi khi phải mất một thời gian để tải polymer và khi sử dụng <body unresolved>, trang sẽ để trống cho đến khi mọi thứ sẵn sàng. Có cách nào để hiển thị một cái gì đó giữa thời gian mà trang được phục vụ và thời gian mà polymer được thực hiện làm phép thuật của nó?Spinner tải trước polymer
documentation mô tả thuộc tính unresolved xóa một số điều này.
Mặc dù thường áp dụng unresolved cho thành phần <body>, khiến toàn bộ nội dung trang của bạn bị ẩn cho đến khi Polymer sẵn sàng, nó có thể được áp dụng cho bất kỳ thành phần nào. Ví dụ: bạn có thể sử dụng <div unresolved> làm trình bao bọc xung quanh phần của trang dựa trên Polymer và tạo thông báo tải bên ngoài trình bao bọc đó sẽ hiển thị ngay lập tức. (Sau đó, bạn muốn nghe sự kiện polymer-ready và ẩn thông báo tải của mình khi được kích hoạt.)
Đây là một ví dụ sử dụng cách rất chậm để giảm thời gian cần thiết cho phần tử Polymer phương pháp vòng đời (live demo):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer Demo</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<p id="spinner">Loading...</p>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="slow-poke">
<template>
<h1><content></content></h1>
</template>
<script>
Polymer({
// Used to introduce a delay in initializing the Polymer element.
// Don't try this at home!
created: function() {
var start = Date.now();
while (true) {
if (Date.now() - start > 1000) {
break;
}
}
}
});
</script>
</polymer-element>
<div unresolved>
<slow-poke>Here I am... finally!</slow-poke>
<slow-poke>Me too!</slow-poke>
</div>
<script>
window.addEventListener('polymer-ready', function() {
document.querySelector('#spinner').classList.add('hidden');
});
</script>
</body>
</html>
(Bằng cách này, những gì bạn đang tìm kiếm để được tải chậm Nếu đó là một yếu tố tiêu chuẩn/lõi, nó có thể là giá trị nộp một lỗi đối với các dự án tương ứng trên GitHub?.)