/joshua-picture-loader

joshua-picture-loader

Primary LanguageJavaScript

PictureLoader

Use the sessionStorage, loading pictures will first check whether there is no expired sessionStorage resources, if any, then directly from the local load; otherwise, request online resources.

tip：sessionStorage has a size limit, if the image size exceeds the limit, it will not be stored locally, still use online resources

initialize 1：insert to dom after load

step 1

<div class="preload" data-source="image/source.jpg"></div>

step 2

let loader = new PictureLoader({
  	className: 'preload',
});

initialize 2：load the image source only

let loaderQueue = new PictureLoader({
    sourceQueue: [
        'image/1.jpg',
        'image/2.jpg',
        'image/3.jpg',
        'image/4.jpg',
        'image/5.jpg',
    ],
});

start to load

loader.load();

html attribute

name description
data-source image source to load
data-bg whether load as background image

initialize options

className & sourceQueue two choose one

name type default value description
className string preload determine the class name of loader element
sourceQueue array [] source collection to load
loadOne function null trigger when load one image
loadAll function null trigger when load all images

static property

name type default value description
dataName string data-source determine which attribute to set the source
flagBg string data-bg determine whether to load as background image
survivalTime number (ms) 60000 survival time of cache
useStorage boolean true on desktop browser except IE. Other platform will be false whether use sesstion storage or not