使用方法:

 //图片预加载
var the_images = [];//新建一个数组,然后将要加载的图片地址推入这个数组中;
the_images.push( 'bg.jpg' );
var loading_process = 0;
jQuery.imgpreload(the_images,//开始运行预加载;
{
each: function()//each的意思是,每次加载完一个图片后,执行此匿名函数中的代码,本例仅仅是将图片的地址打印到页面而已,所以大家不用纠结“为什么没有看到图片”
{
var status = $(this).data('loaded')?'success':'error';
loading_process += Math.round(100/(the_images.length));
if(loading_process<100){
$('p').html(loading_process+'%');
}
},
all: function()//all的意思是,当所有图片加载完毕之后,执行此函数体内的内容;举个例子,如果有5张图片需要预加载,则each中的function会执行5次,而all的function 只会执行一次~
{ }
}
);

图片预加载的插件使用-jquery.imgpreload.min.js的更多相关文章

  1. 闭包,jQuery插件的写法:图片预加载

    最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...

  2. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  3. 【JQuery Zepto插件】图片预加载

    屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...

  4. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

  5. 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  6. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  7. 图片预加载插件 preLoad.js

    1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...

  8. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  9. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

随机推荐

  1. python开发-实现redis中的发布订阅功能

    Python3学习(二十七):python实现Redis的订阅与发布(sub-pub机制) 先介绍一下redis的pub/sub功能: Pub/Sub功能(means Publish, Subscri ...

  2. MySQL创建及删除临时表

    示例SQL: drop temporary table if exists testdb.tmp_test_table; create temporary table testdb.tmp_test_ ...

  3. 【Leetcode_easy】669. Trim a Binary Search Tree

    problem 669. Trim a Binary Search Tree 参考 1. Leetcode_easy_669. Trim a Binary Search Tree; 完

  4. css 命名规范参考[转]

    命名空间 另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类.这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 HTML 或者样式的时候是很需要的.我使用 ...

  5. Docker从入门到动手实践

    一些理论知识,我这里就不累赘了 docker 入门资料,参考:https://yeasy.gitbooks.io/docker_practice/content/ Dockerfile常用命令,图片来 ...

  6. react 做的简易todolist

    首先要有一定的react的基础,里面的一些不做解释(包括项目文件的用法及作用)   ### 1. 先安装react的插件 npm  install  create-react-app  -g      ...

  7. 解决 Ceph v14.2.1 RGW使能压缩时遇到不生效的问

    根据常规方法部署Ceph(14.2.1 or 14.2.2)集群+rgw后,通过命令“radosgw-admin zone placement modify --rgw-zone=default -- ...

  8. python 优雅的解析 jsonp

    一段 jsonp 格式数据 mtopjsonpweexcb1({"api":"mtop.taobao.idle.recycle.nextspunav.get", ...

  9. 高级UI-DrawerLayout侧滑

    侧滑的方案有很多种,早期的开源SliddingMenu,以及后来的DrawerLayout以及NavigationView等都可实现侧滑效果,这里介绍的是DrawerLayout,下一节将介绍Navi ...

  10. Java面试题代码篇

    1.统计字符串中的各种字符的个数并对其排序 package JavaMianSiTest; public class TongJIZiFu { public static void main(Stri ...