高效且可定制的 jQuery 图像预加载插件 - Kyco Preloader

版本:

浏览量:1180

最后更新：2021-09-12

应用标签：Jquery插件 MAC 软件 git

推荐指数:

查看演示点击下载

详细信息

Kyco Preloader 是一个高效且可定制的 jQuery 图像预加载器插件，它允许使用进度条和加载文本预加载您的图像。

特征：

带百分比显示的动画进度条。
支持预加载本地图片、CSS 背景和跨域资源。
支持按顺序预加载图像。
自定义加载短信。
支持进度动画和预加载淡出动画。

基本用法：

1. 在文档中包含最新版本的 jQuery 库。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. 在文档中包含 jQuery Kyco Preloader 插件的 javascript 和 CSS。

<script src="jquery.kyco.preloader.min.js"></script>
<link rel="stylesheet" href="jquery.kyco.preloader.css">

3. 将图像包装在要预加载图像的容器中。

<div class="demo">
<img src="images/01.jpg">
<img src="images/02.jpg">
<img src="images/03.jpg">
...
</div>

4. 通过调用您创建的容器上的插件来启用图像预加载器。

<script>
$(document).ready(function() {
$('.demo').kycoPreload();
});
</script>

5. 选项和默认值。

preloadSelector: true,
// if set to true will preload the selector's background image, note that the image
// will show as soon as it is loaded and not only once the preloader is done loading
truePercentage: true,
// NOTE: does not work with cross-domain calls
// if set to true will get the actual (compressed) file size of all the images instead of
// just looking at the number of images loaded divided by the total number of images
disableOverlay: false,
// if set to true will not create the blocking overlay
showInContainer: false,
// if set to true will load the preloader inside the selector element instead of
// across the whole page
hideBackground: false,
// NOTE: hideBackground is an option for when showInContainer is set to true
// if set to true will hide the css background-image of the selector element
hideNonImageElements: false,
// if set to true will hide all elements of the selector, not only the images
progressiveReveal: false,
// NOTE: if hideNonImageElements is set to true then progessiveReveal might not
// return the expected result because the image element's parent might be hidden
// if set to true will show images as soon as they are preloaded
forceSequentialLoad: false,
// Will force images to load in the order they appear in the DOM, this can potentially
// increase the load time because images won't start loading in parallel
silentMode: false,
// if set to true will hide the preloader
debugMode: false,
// if set to true will show errors
useOpacity: false,
// if set to true will use opacity property to hide elements instead of display property
hidePercentage: false,
// if set to true will not show the percentage numbers while loading
loaderText: 'loading images, please wait...',
// set the text of the loading message
animateDuration: 0,
// set the duration in milliseconds for each progress animation
fadeOutDuration: 100,
// set the duration in milliseconds for the preloader fadeout animation
showImagesBeforeComplete: true,
// if set to false will wait for the animation of the preloader fadeout to complete
// before showing the images
afterEach: function() {},
// called once after every image load
beforeComplete: function() {},
// called once after all images have been loaded and before the fadeout animation of the
// preloader triggers
onComplete: function() {}
// called once after all images have been loaded and all preloader animations have completed