|
| 1 | +const LazyLoad = { |
| 2 | + density: window.devicePixelRatio ? window.devicePixelRatio : 'auto', |
| 3 | + images: [], |
| 4 | + debounce: null, |
| 5 | + config: CLDLB ? CLDLB : {}, |
| 6 | + lazyThreshold: 0, |
| 7 | + _init() { |
| 8 | + this._calcThreshold(); |
| 9 | + [ ...document.images ].forEach( ( image ) => { |
| 10 | + if ( ! image.dataset.src ) { |
| 11 | + return; |
| 12 | + } |
| 13 | + image.originalWidth = image.dataset.width; |
| 14 | + this.images.push( image ); |
| 15 | + } ); |
| 16 | + |
| 17 | + // Resize handler. |
| 18 | + window.addEventListener( 'resize', ( ev ) => { |
| 19 | + this._debounceBuild(); |
| 20 | + } ); |
| 21 | + window.addEventListener( 'scroll', ( ev ) => { |
| 22 | + this._debounceBuild(); |
| 23 | + } ); |
| 24 | + // Build images. |
| 25 | + this._build(); |
| 26 | + }, |
| 27 | + _calcThreshold() { |
| 28 | + const number = this.config.lazy_threshold.replace( /[^0-9]/g, '' ); |
| 29 | + const type = this.config.lazy_threshold |
| 30 | + .replace( /[0-9]/g, '' ) |
| 31 | + .toLowerCase(); |
| 32 | + let unit = 0; |
| 33 | + switch ( type ) { |
| 34 | + case 'em': |
| 35 | + unit = |
| 36 | + parseFloat( getComputedStyle( document.body ).fontSize ) * |
| 37 | + number; |
| 38 | + break; |
| 39 | + case 'rem': |
| 40 | + unit = |
| 41 | + parseFloat( |
| 42 | + getComputedStyle( document.documentElement ).fontSize |
| 43 | + ) * number; |
| 44 | + break; |
| 45 | + case 'vh': |
| 46 | + unit = ( window.innerHeight / number ) * 100; |
| 47 | + break; |
| 48 | + default: |
| 49 | + unit = number; |
| 50 | + } |
| 51 | + this.lazyThreshold = window.innerHeight + parseInt( unit, 10 ); |
| 52 | + }, |
| 53 | + _debounceBuild() { |
| 54 | + if ( this.debounce ) { |
| 55 | + clearTimeout( this.debounce ); |
| 56 | + } |
| 57 | + this.debounce = setTimeout( () => { |
| 58 | + this._build(); |
| 59 | + }, 100 ); |
| 60 | + }, |
| 61 | + _getDensity() { |
| 62 | + const maxDensity = CLDLB.dpr ? CLDLB.dpr.replace( 'X', '' ) : 'off'; |
| 63 | + if ( 'off' === maxDensity ) { |
| 64 | + return 1; |
| 65 | + } |
| 66 | + let deviceDensity = this.density; |
| 67 | + if ( |
| 68 | + ! CLDLB.dpr_precise && |
| 69 | + 'auto' !== maxDensity && |
| 70 | + 'auto' !== deviceDensity |
| 71 | + ) { |
| 72 | + deviceDensity = |
| 73 | + deviceDensity > Math.ceil( maxDensity ) |
| 74 | + ? maxDensity |
| 75 | + : deviceDensity; |
| 76 | + } else if ( 'auto' === CLDLB.dpr && 'auto' !== deviceDensity ) { |
| 77 | + deviceDensity = 'auto'; |
| 78 | + } |
| 79 | + |
| 80 | + return deviceDensity; |
| 81 | + }, |
| 82 | + _build() { |
| 83 | + this.images.forEach( ( image ) => { |
| 84 | + this.buildSize( image ); |
| 85 | + } ); |
| 86 | + }, |
| 87 | + _shouldRebuild( image ) { |
| 88 | + const width = this.scaleSize( |
| 89 | + image.originalWidth, |
| 90 | + image.width, |
| 91 | + this.config.pixel_step |
| 92 | + ); |
| 93 | + const rect = image.getBoundingClientRect(); |
| 94 | + const density = 'auto' !== this.density ? this._getDensity() : 1; |
| 95 | + return ( |
| 96 | + rect.top < this.lazyThreshold && |
| 97 | + ( width > image.naturalWidth / density || ! image.cld_loaded ) |
| 98 | + ); |
| 99 | + }, |
| 100 | + _shouldPlacehold( image ) { |
| 101 | + const width = this.scaleSize( |
| 102 | + image.originalWidth, |
| 103 | + image.width, |
| 104 | + this.config.pixel_step |
| 105 | + ); |
| 106 | + const rect = image.getBoundingClientRect(); |
| 107 | + const density = 'auto' !== this.density ? this._getDensity() : 1; |
| 108 | + return ( |
| 109 | + ! image.cld_loaded && |
| 110 | + rect.top < this.lazyThreshold * 2 && |
| 111 | + ( width > image.naturalWidth / density || ! image.cld_placehold ) |
| 112 | + ); |
| 113 | + }, |
| 114 | + getResponsiveSteps( image ) { |
| 115 | + const steps = Math.ceil( |
| 116 | + image.dataset.breakpoints |
| 117 | + ? image.originalWidth / image.dataset.breakpoints |
| 118 | + : this.responsiveStep |
| 119 | + ); |
| 120 | + return steps; |
| 121 | + }, |
| 122 | + getQuality() { |
| 123 | + let quality = 'q_auto'; |
| 124 | + switch ( |
| 125 | + navigator && navigator.connection |
| 126 | + ? navigator.connection.effectiveType |
| 127 | + : 'none' |
| 128 | + ) { |
| 129 | + case 'none': |
| 130 | + break; |
| 131 | + case '4g': |
| 132 | + quality = 'q_auto:good'; |
| 133 | + break; |
| 134 | + case '3g': |
| 135 | + quality = 'q_auto:eco'; |
| 136 | + break; |
| 137 | + case '2g': |
| 138 | + case 'slow-2g': |
| 139 | + quality = 'q_auto:low'; |
| 140 | + break; |
| 141 | + default: |
| 142 | + quality = 'q_auto:best'; |
| 143 | + break; |
| 144 | + } |
| 145 | + return quality; |
| 146 | + }, |
| 147 | + scaleSize( original, newSize, responsiveStep ) { |
| 148 | + const diff = Math.floor( ( original - newSize ) / responsiveStep ); |
| 149 | + let scaledSize = original - responsiveStep * diff; |
| 150 | + if ( scaledSize > original ) { |
| 151 | + scaledSize = original; |
| 152 | + } else if ( this.config.max_width < scaledSize ) { |
| 153 | + scaledSize = original; |
| 154 | + } |
| 155 | + return scaledSize; |
| 156 | + }, |
| 157 | + buildSize( image ) { |
| 158 | + if ( this._shouldRebuild( image ) ) { |
| 159 | + if ( image.dataset.srcset ) { |
| 160 | + image.srcset = image.dataset.srcset; |
| 161 | + } else { |
| 162 | + image.src = this.getSizeURL( image ); |
| 163 | + } |
| 164 | + } else if ( this._shouldPlacehold( image ) ) { |
| 165 | + image.src = this.getPlaceholderURL( image ); |
| 166 | + } |
| 167 | + }, |
| 168 | + getSizeURL( image ) { |
| 169 | + image.cld_loaded = true; |
| 170 | + if ( image.dataset.srcset ) { |
| 171 | + image.srcset = image.dataset.srcset; |
| 172 | + delete image.dataset.srcset; |
| 173 | + return ''; |
| 174 | + } |
| 175 | + const width = this.scaleSize( |
| 176 | + image.originalWidth, |
| 177 | + image.width, |
| 178 | + this.config.pixel_step |
| 179 | + ); |
| 180 | + const density = this._getDensity(); |
| 181 | + let newSize = ''; |
| 182 | + if ( width ) { |
| 183 | + newSize += 'w_' + width; |
| 184 | + if ( 1 !== density ) { |
| 185 | + newSize += ',dpr_' + density; |
| 186 | + } |
| 187 | + } |
| 188 | + return image.dataset.src |
| 189 | + .replace( '--size--', newSize ) |
| 190 | + .replace( /q_auto(?!:)/gi, this.getQuality() ); |
| 191 | + }, |
| 192 | + getPlaceholderURL( image ) { |
| 193 | + image.cld_placehold = true; |
| 194 | + return image.dataset.placeholder.replace( '/--size--', '/' ); |
| 195 | + }, |
| 196 | +}; |
| 197 | +// Init. |
| 198 | +window.addEventListener( 'load', () => { |
| 199 | + LazyLoad._init(); |
| 200 | +} ); |
0 commit comments