1
나는이 요점에서 볼 수 있듯이, 폴리머에서 작동하는 로딩 화면을 얻으려고 작업을 로딩 scren 얻기 : https://gist.github.com/SlicedSilver/f2e93a5995f84d9cd512폴리머
아이디어는 아주 간단 다음 엔트리 포인트가 렌더링 가벼운 HTML 파일입니다 본체에 가벼운 페이지가 렌더링 된 후 DOM을 통해 Polymer 앱을로드하는 onload 콜백을 포함하는로드 스크린.
데스크톱 브라우저에서 아름답게 작동합니다. 모바일 브라우저에서는 filestoload.html이로드되지 않습니다 (또한 오류가 발생하지 않음). 로딩 화면이 그대로 유지되고 앱이로드되지 않습니다. 전체 코드는 다음과 같습니다. 그러나이 행에 특히주의하십시오.
tag.setAttribute('onload', 'polymerLoader.insertPolymerApplication()');
onload 이벤트는 절대 실행되지 않으며 결코 오류를 발생시키지 않습니다. 나는 DOM을 통해 그리고 적절한 이벤트 핸들러를 사용하여 아무 소용이없는 시도를했습니다. 나는 심지어 같은 HTML 파일에 링크를 추가, 모두 전성 검사와 JS의 손에서 그것을 복용 시도했다 :
<link rel="import" href="/filestoload.html" onload="polymerLoader.insertPolymerApplication()" >
같은 결과가 - 바탕 화면에 응용 프로그램을 표시,하지만 단지 보여줍니다 모바일 화면로드 중. 나는 신선한 아이디어에서 벗어났다. 어떤 도움이 필요합니까?
....
다음은 경량의 진입 점 (index.html을)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.ico"/>
<title>GreenMaven</title>
<meta name="description" content="greenmaven description">
<script src="assets/js/polymerAppLoader.js"></script>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
z-index: -500;
display: block;
}
</style>
</head>
<body onload="polymerLoader.loadPolymerApplication()">
<div id="loader" class="loading">
<img src="assets/images/gears.svg" />
</div>
</body>
</html>입니다 그리고 여기 폴리머 응용 프로그램의 나머지를로드하는 JS는 다음과 같습니다
'use strict';
/* global polymerLoader */
/*jshint unused:false*/
/*jshint -W079*/
// This is the normal conditional loader for the Web components Polyfill
if ('registerElement' in document && 'createShadowRoot' in HTMLElement.prototype && 'import' in document.createElement('link') && 'content' in document.createElement('template')) {
// We're using a browser with native WC support!
} else {
// Add web components polyfill...
document.write('<script src="bower_components/webcomponentsjs/webcomponents.lite.js"><\/script>');
}
var polymerLoader = (function() {
// Function for creating a link element and inserting it into the <head> of the html document
function addLinkTag(elementType, address, shim, loadTrigger) {
var tag = document.createElement('link');
tag.rel = elementType;
tag.href = address;
if (shim) {
// add the shim-shadowdom attribute
tag.setAttribute('shim-shadowdom', '');
}
if (loadTrigger) {
// This file needs to be loaded before inserting the Polymer Application
// when finished loading it will call the polymerLoader.insertPolymerApplication() function
tag.setAttribute('onload', 'polymerLoader.insertPolymerApplication()');
expectedCalls++;
}
document.getElementsByTagName('head')[0].appendChild(tag);
}
var pgApploaded = false;
function loadPolymerApplication() {
// Only insert once.
if (!pgApploaded) {
addLinkTag('import', 'filestoload.html', false, true);
pgApploaded = true;
}
}
// Counter variable for insertPolymerApplication() calls
var callCount = 0;
var expectedCalls = 0;
function insertPolymerApplication() {
callCount++;
// Only when callCount >= expectedCalls
// The application is only inserted after all required files have loaded
// for the application to work.
if (callCount >= expectedCalls) {
// here is the html that is inserted when everything is loaded.
document.querySelector('body').innerHTML += '<template is="auto-binding" id="app"><polymer-app id="main-app"></polymer-app></template>';
document.getElementById('loader').style.display = 'none';
}
}
return {
insertPolymerApplication: function() {
insertPolymerApplication();
},
loadPolymerApplication: function() {
loadPolymerApplication();
}
};
})(document);그리고 마지막으로, 여기에 일반적으로 폴리머 된 index.html에서 발견 될 수있는 링크 및 스크립트가있는 filestoload.html 파일입니다 :
<!doctype html>
<!-- Here is where you put the scripts required by the page, that would normally be -->
<!-- included in the index.html page, you can still use grunt/gulp build functions on these -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="manifest" href="/manifest.json">
<link rel="import" href="/src/greenmaven-app/greenmaven-app.html">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- endreplace-->
<!-- build:js scripts/app.js -->
<script src="properties_base/farmhacker-properties.js"></script>
<!-- endbuild-->
<!-- build:js scripts/thirdparty.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - $('#navbar').height()
}, 1000);
return false;
}
}
});
});
</script>
<!-- endbuild-->