JS画像のプリロード例-jsチュートリアル-php.cn

图片预加载2017-10-17 *{padding: 0;margin: 0} img{width: 100%;display: block;} --> // 图片加载js代码 window.Echo=(function(window,document,undefined){'use strict';var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute('data-src');store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll('[data-src]');var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener('scroll',_throttle,false);}else{window.attachEvent('onscroll',_throttle);}};return{init:init,render:_throttle};})(window,document); Echo.init({ offset: 100,//离可视区域多少像素的图片可以被加载 throttle: 0,//图片延时多少毫秒加载 els: '.jsLoadImg', elP: '.lazy-img', dataSrc: 'data-src' }); 原理は、実際の画像のパスをsrcに置き、最初にsrcに小さな画像をロードし、ページが対応する位置にスクロールしたときにsrcの内容をsrcに割り当てることです。

メインコードは「画像をプリロードするjsコード」で、ここではjqueryが必要ないことを除いて、jqueryプラグインを使用するのと同じように、パラメーターを呼び出して渡します。

効果は次のとおりです:

1. プリロードがない場合は、13M をロードする必要があります

2. プリロードがある場合は、最初に 2.6M をロードするだけで済みます

ここで使用する画像は異なるドメイン名にあるため、すべての画像が同じドメイン名にある場合、その効果はより明白になります。