JS image preloading example-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' }); The principle is to put the real image path in src, load the small image in src first, and then assign the content of src to src when the page scrolls to the corresponding position.

The main code is "image preloading js code", and then calls and passes parameters, which is the same as using the jquery plug-in, except that jquery is not required here.

The effect is as follows:

1. When there is no preloading, 13M must be loaded

2. When there is preloading, only the first Loading 2.6M

#Because many of the pictures I use here are under different domain names, so they can be loaded at the same time. If the pictures are all under the same domain name, the effect will be Better obviously.