Skip to content

🎿 [plugin] An image pre loaded plugin is being implemented to achieve ordered loading 💭一个图片预加载的小插件

Notifications You must be signed in to change notification settings

okaychen/preload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

preLoad

GitHub forks GitHub stars

图片预加载介绍

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

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

我们为什么需要预加载?

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

用法

下载

git clone [email protected]: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封装的小插件

About

🎿 [plugin] An image pre loaded plugin is being implemented to achieve ordered loading 💭一个图片预加载的小插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published