code craft
What can your tired old page, once loaded and used and read, can do for your user? It can preload components needed by the next page, so when the users visit the next page, they have the new scripts, styles and images already in the cache. Next page loads faster and the user's happy. On its death bed you tired old page has left a good inheritance for future generations. Good old page.
一旦加载，使用和阅读，您疲倦的旧页面可以为您的用户做什么？ 它可以预加载下一页所需的组件，因此，当用户访问下一页时，他们已经在缓存中拥有新的脚本，样式和图像。 下一页加载速度更快，用户感到满意。 在它的死床上，您疲惫的旧页面为子孙后代留下了很好的遗产。 好的旧页面。
How can you go about preloading for the next page? By waiting for onload of the current page and requesting the new components. Here are 4 ways to do so, all using a timeout of 1 second after page load so that prefetching doesn't interfere with the user experience on the page.
如何进行下一页的预加载？ 等待当前页面的加载并请求新组件。 这里有4种方法，所有方法都使用页面加载后的1秒钟超时，这样预取不会干扰页面上的用户体验。
一种方法...(DOM) (One way... (DOM))
Using DOM you can create a new LINK element and a new SCRIPT element and append them to the HEAD. For images - it's a one-liner new Image.src="..."
使用DOM可以创建一个新的LINK元素和一个新的SCRIPT元素，并将它们附加到HEAD。 对于图像-这是一种new Image.src="..."
The drawback of this method is that your CSS is executed against the current page and might affect display. Same for JavaScript - it's executed. The image is simply requested and never displayed.
此方法的缺点是您CSS是针对当前页面执行的，可能会影响显示。 与JavaScript相同-已执行。 该图像只是请求而从未显示。
window.onload = function() {
setTimeout(function(){
// reference to <head>
var head = document.getElementsByTagName('head')[0];
// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "new.js";
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "new.png";
}, 1000);
};
For this way of doing it you can use any JavaScript library's helper methods to load stuff on demand. Good examples - YUI Get and LazyLoad
通过这种方式，您可以使用任何JavaScript库的辅助方法来按需加载内容。 很好的例子-YUI Get和LazyLoad
...或其他...(使用iframe) (... or another ... (using iframe))
Another option is to create an iframe and append your components to its head. Using an iframe you can avoid the CSS potentially affecting the current page. JavaScript will still be executed.
另一种选择是创建一个iframe，并将您的组件附加到其头部。 使用iframe可以避免CSS可能影响当前页面。 JavaScript仍将执行。
window.onload = function() {
setTimeout(function(){
// create new iframe
var iframe = document.createElement('iframe');
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("name", "preload");
iframe.id = "preload";
iframe.src = "about:blank";
document.body.appendChild(iframe);
// gymnastics to get reference to the iframe document
iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;
var doc = iframe.document;
doc.open(); doc.writeln("<html><body></body></html>"); doc.close();
// create CSS
var css = doc.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css";
// create JS
var js = doc.createElement("script");
js.type = "text/javascript";
js.src = "new.js";
// preload CSS and JS
doc.body.appendChild(css);
doc.body.appendChild(js);
// preload IMG
new Image().src = "new.png";
}, 1000);
};
...我会找到的...(iframe中的静态页面)(... I'm gonna find ya ... (static page in iframe))
If your components are static you can create a page that has them all and load that page into the dynamic iframe. Static means knowing them in advance, not relying on page's JavaScript to figure them out on the fly. As you can see, much simpler than the previous code.
如果您的组件是静态的，则可以创建一个包含所有组件的页面并将该页面加载到动态iframe中。 静态意味着要事先知道它们，而不是依靠页面JavaScript来快速找出它们。 如您所见，它比以前的代码简单得多。
window.onload = function() {
setTimeout(function(){
// create a new frame and point to the URL of the static
// page that has all components to preload
var iframe = document.createElement('iframe');
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("frameborder", "0");
iframe.src = "preloader.html";
document.body.appendChild(iframe);
}, 1000);
};
......我要GET茶， GET CHA， GET茶！ (使用Ajax) (... I'm gonna GETcha, GETcha, GETcha! (with Ajax))
Finally - Ajax. Scripts are not executed, CSS not used for rendering. Nice and clean. For simplicty the code has no support for browsers that don't know what XMLHttpRequest is.
最后-阿贾克斯。 脚本不执行，CSS不用于渲染。 干净整洁。 为简单起见，该代码不支持不知道XMLHttpRequest是什么的浏览器。
window.onload = function() {
setTimeout(function(){
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'new.css');
xhr.send('');
// preload image
new Image().src = "new.png";
}, 1000);
};
谢谢！(Thanks!)
Any other ways you can think of?
您还能想到其他方法吗？
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息
翻译自: https://www.phpied.com/the-art-and-craft-of-postload-preloads/
code craft
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
