Beispiel für das Vorladen von JS-Bildern-js-Tutorial-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' }); Das Prinzip besteht darin, den tatsächlichen Bildpfad in src einzufügen, zuerst das kleine Bild in src zu laden und dann den Inhalt von src beim Scrollen der Seite der entsprechenden Position zuzuweisen zur entsprechenden Quelle.

Der Hauptcode ist „js-Code zum Vorladen von Bildern“. Das anschließende Aufrufen und Übergeben von Parametern ist dasselbe wie bei der Verwendung des JQuery-Plug-Ins, mit der Ausnahme, dass JQuery hier nicht benötigt wird.

Der Effekt ist wie folgt:

1 Wenn keine Vorladung vorhanden ist, müssen 13M geladen werden

2 wird vorab geladen, nur 2,6 Millionen werden geladen

Da viele der Bilder, die ich hier verwende, unter unterschiedlichen Domainnamen stehen, können sie gleichzeitig geladen werden Alle unter demselben Domainnamen, der Effekt wird besser und offensichtlicher sein.