Question

我的网站使用floatbox来显示画廊的图像和单个图像。通过Lighthouse运行该站点，后者继续“抱怨” floabox.js是渲染阻止资源。在JS文件旁边，我还必须加载脚本随附的floatbox.css，使其正常工作。

我尝试使用defer以及async，但是两者似乎混淆在一起，导致无法正常工作。因此，基本上开箱即用的设置是：

<link rel="stylesheet" href="https://some_site/floatbox/floatbox.css"> 
<script src="https://some_site/floatbox/floatbox/floatbox.js" type="text/js"></script>

Lighthouse的其他建议之一是使css文件处于非阻塞状态。我设法通过以下脚本解决了这一建议：

<script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = '//some_site/floatbox/floatbox.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>

我的问题是如何以一种不会呈现阻塞的方式加载floatbox脚本？我确实更喜欢非jQuery解决方案。

感谢您的时间！

消除不使用异步或延迟的阻止JavaScript

0 个答案: