没有定义inView -instant-Render.js

Question

我的网站在第一页上有大量的照片，这会降低页面的性能，并使加载时间过长。为了解决这个问题，我找到了lazy-instant-render.js，它可以防止在页面准备就绪时加载所有图像。我在控制台中得到这个错误:没有定义inView。

// Performance tests such as Google Lighthouse often complain about below the fold images while lazy loading 
// techniques may introduce a flash effect for images on bigger screens
// This snippet shows a solution to instantly display images as if loaded using src="" while maintaining 
// the lazy loading benefit on smaller screens.

// Tip: a second and potentially better technique is to rewrite lazy loaded images to regular src="" images in a Service Worker.

// this snippet depends on in-view (5kb)
// @link https://github.com/camwiegert/in-view/

// tiny cross browser domready method
// @link https://gist.github.com/dciccale/4087856
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}

// requestAnimationframe
var RAF = window.requestAnimationframe || setTimeout;

var lazyToken = 'data-lzy';

// display image
var lazyResolve = function(el) {

    // already loaded
    if (!el.hasAttribute(lazyToken)) {
        return;
    }

    // verify if image is hidden by parent
    if (el.offsetParent !== null) {

        // remove lazy marker (to mark as completed)
        el.removeAttribute(lazyToken);

        // requestAnimationFrame to prevent layout trashing
        RAF(function() {
            el.setAttribute('src', el.getAttribute(lazyToken));
        });
    }
}

// setup lazy load method
DOMReady(function() {
    inView('['+lazyToken+']').on('enter', lazyResolve);
});

// instantly load visible images on render
var mutationObserver = window.MutationObserver || window.WebKitMutationObserver,
    observer;
if (mutationObserver) {
    observer = new mutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var node;
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                node = mutation.addedNodes[i];
                if (node.nodeName === 'IMG' && node.hasAttribute(lazyToken)) {
                    if (inView.is(node)) {

                        // start download
                        new Image().src = node.getAttribute(lazyToken);

                        // display image with requestAnimationFrame
                        lazyResolve(node);
                    }
                }
            }
        });
    });
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });
}

Answer 1

您可以使用新的标准loading=“惰性”-attribute功能来惰性加载图像(如果需要，还可以使用iframe)。此外，为了支持更老的浏览器，您可以使用我为此开发的polyfill：https://github.com/mfranzke/loading-attribute-polyfill