/*
**************图片预加载插件******************
///作者:没剑(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!")
        });
        
    });
}

使用说明:
$("div img").LoadImage(true,120,90);

效果如下:

欢迎大家交流使用心得

demo下载

转载于:https://www.cnblogs.com/top5/archive/2010/01/30/1660199.html

jquery图片预加载+自动等比例缩放插件相关推荐

  1. html加载图片有超时时间吗,[前端]图片预加载方法

    目录 1. 使用jQuery图片预加载(延迟加载)插件Lazy Load Lazy Load也叫惰性加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似 ...

  2. 微信 html自动加载js,微信小程序实现图片预加载组件

    网页中的图片预加载 图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...

  3. jQuery插件之图片预加载

    背景: 图片是web页面的重要组成部分,也是前端页面优化的重要内容.当用户访问一个比较庞大的页面时,若相关资源没有提前加载,可能会展示给用户一片空白,从而导致用户流失等:再比如受网速的影响,资源加载时 ...

  4. Jquery图片懒加载和预加载

    Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...

  5. 图片预加载与图片懒加载

    图片预加载与图片懒加载 图片预加载 图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...

  6. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. 关于图片预加载的思考

    引子: 很多时候,我们在写html页面的时候,当需要在页面中加入图片时,我们很自然地把图片直接用<img>标签放在了<body>里面,这本来是没有多大问题的. 但是当图片数量很 ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

最新文章

  1. [工具向]__androidstudio签名打包apk及配置自动签名
  2. 猿辅导、作业帮忙“圈钱”,跟谁学、有道、51Talk狂“烧钱”,在线教育钱途在哪?
  3. 又一款超酷的 Python 可视化神器:cutecharts
  4. mysql 重命名索引_mysql增删改字段,重命名替换字段
  5. 初步接触TinyXML2
  6. redis的持久化(RDB与AOF)未完待续
  7. Bailian4004 数字组合【递归+DP】
  8. 如何实现系统集约与管理运营集约相互促进而不是相互制约
  9. 分享改进 完全定制自己的代码生成器
  10. linux mysql远程连接
  11. java nio web,JavaWeb之三——网络IO和NIO
  12. java成绩管理系统代码_[转载]我写的Java学生成绩管理系统源代码
  13. web前端经典面试题及答案
  14. 基于STM32F103驱动TM1640LED数码管代码实现
  15. Python如何设置对数log坐标系的range
  16. Texture贴图材质资源网站分享
  17. 如何打开windows的服务管理
  18. C语言---数组排序
  19. 用c语言编写九九乘法表
  20. 线性规划求极值问题-系统架构设计师-最“稳准狠”解题方法

热门文章

  1. 有些投资人从机构出来,自己单干做投资,募资一毛钱都没募到
  2. 就算给穷人一百万,他们也很难赚到一块钱利润
  3. 人们一说赚钱,都会说赢利摸式
  4. 京东也准备向社区团购进发了?
  5. 终于把Redis场景设计搞清楚了,需要掌握的都在这了
  6. 不玩游戏,855和730处理器在日常应用的速度差别有多大?
  7. 服务注册不进eureka
  8. ssas 度量值属性_SSAS多维立方体中的初始属性和度量
  9. 运行中SQL Server查询存储
  10. 伪题解 洛谷 P1363 幻想迷宫(DFS)