InView Is Not Defined Lazy-instant-render.js

- 1 answer

My website has a large number of photographs on the first page which is slowing down the performance of the page and making the load time far too long. To combat this I found lazy-instant-render.js which will prevent all images from loading when the page is ready. I get this error in console: inView is not defined.

// 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

// tiny cross browser domready method
// @link
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)) {

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

        // remove lazy marker (to mark as completed)

        // 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,
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 ( {

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

                        // display image with requestAnimationFrame
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true


You could use the new the standard loading="lazy"-attribute functionality to lazy load images (and iframes if needed). Additionally to support older browsers as well, you could use the polyfill that I‘ve developed for this aspect: