/*
**************图片预加载插件******************
///作者:没剑(2008-06-23)
///http://regedit.cnblogs.com
///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来
可对图片进行是否自动缩放功能
此插件使用时可让页面先加载,而图片后加载的方式,
解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题
///参数设置:
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径
*/
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
if(loadpic==null)loadpic="load3.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image();
//alert("Loading")
img.src=src;
//自动缩放图片
var autoScaling=function(){
if(scaling){
if(img.width>0 && img.height>0){
if(img.width/img.height>=width/height){
if(img.width>width){
t.width(width);
t.height((img.height*width)/img.width);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if(img.height>height){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width(img.width);
t.height(img.height);
}
}
}
}
}
//处理ff下会自动读取缓存图片
if(img.complete){
//alert("getToCache!");
autoScaling();
return;
}
$(this).attr("src","");
var loading=$("<img alt=\"加载中\" title=\"图片加载中\" src=\""+loadpic+"\" />");
t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
//alert("finally!")
});
});
}
分享到:
相关推荐
图片预加载插件---preload.js
图片预加载插件。包含有序加载和无序加载两种。具体使用方法,参考https://blog.csdn.net/yang1393214887/article/details/92582715
jQuery图片预加载插件源码.zip
HTML+jquery图片预加载功能,实用于web及移动端
主要为大家详细介绍了JS图片预加载插件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery实现图片预加载,些插件在jquery基础上进行封装。大家可以对插件进行修改。
代码如下:/* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否...
Javascript图片预加载,jquery插件。
Jquery插件图片预加载效果,最新版本实现图片加载特效,可根据自己需求修改,非常简单好用。
jQuery 图片切换预加载插件,左右带控制按钮 修正版本.zip
使用jQuery实现图片预加载和自动等比例缩放插件
IntroductionPreload is a picture preloading jQuery plug-in.Application.js//= require jquery...//= require preloadConfigurationNameTypeDefaultDescriptionimgsArray[]预加载的图片地址列表optionsObject{}...
个人认为其实最初学习JavaScript最好找到简洁易懂的demo学习,但是往往搜索到一堆的插件,没有一定的js功底看的累,浪费时间,也很难学到什么干货。
PreLoad 一个图像预加载插件以实现有序加载和无序加载
如果网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时,其他...
这是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效,jQuery图片预加载代码。
**************图片预加载插件****************** ///作者:没剑(2008-06-23) http://regedit.cnblogs.com ///参数设置: scaling 是否等比例自动缩放 width 图片最大高 height 图片最大宽 loadpic 加载中的图片路径...
jquery,图片预加载,自适应宽高 在线预览地址 http://www.ffasp.com/plugs/autoimg/
个人认为其实最初学习JavaScript最好找到简洁易懂的demo学习,但是往往搜索到一堆的插件,没有一定的js功底看的累,浪费时间,也很难学到什么干货。-