Skip to content
🎿 [plugin] An image pre loaded plugin is being implemented to achieve ordered loading 💭一个图片预加载的小插件
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js
.gitattributes
README.md
index.jquery.html

README.md

preLoad

GitHub forks GitHub stars

图片预加载介绍

从字面上来看:预,就是预先;预加载:即预先提前加载。

图片预先加载到浏览器中,访问者可以顺利的网站上浏览冲浪,并享受极快的加载速度;

我们为什么需要预加载?

某些情况下丰富的图片资源,带来更好的用户体验的同时,也降低的我们的性能,有时候,我们在观看页面时需要不断的等待页面加载图片,带来的极差的用户体验(这种表现在画廊,有大量照片、图片占据比例大的地方尤为明显);

用法

下载

git clone git@github.com:okaychen/preload.git

使用

<script src="path/prelaod.js"></script>

或者

import prelaod from 'path/prelaod.js'

实例化对象:

插件名:preload;

参数:图片(数组或者String类型),方法;

方法:目前插件中提供eachall方法;

  • each 每一张图片加载完成之后执
  • all 所有图片加载完毕后执行

示例:

$.preload(imgs,{
    each:function(count){
        //...一张图片加载完后做处理
    },
    all:function(){
        //...所有图片加载完毕之后做处理
    }
});

目录结构描述

目录大体结构如下

process分支下proload.js基于原生JS实现图片预加载

master分支结构

preload
│   README.md 
│   .gitattributes
│   index.jquery.html
|
└───css
│   │   prelaod.css
│   
└───images  
|
└───js
    │   jquery.min.js
    │   preload.js  //基于jQuery封装的小插件
You can’t perform that action at this time.