图片延迟加载jquery插件imgLazyLoad(三)

此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题

///参数设置:
scaling     是否等比例自动缩放
width       图片最大高
height      图片最大宽
loadpic     加载中的图片路径

js插件代码:

/*
**************图片预加载插件******************
///作者:没剑(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=$("<div class=\"load\"></div>");

        t.hide();
        t.after(loading);
        $(img).load(function(){
            autoScaling();
            loading.remove();
            t.attr("src",this.src);
            t.show();
            //alert("finally!")
        });

    });
}

JS

HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友没剑原创图片预加载jquery插件</title>
<meta name="Keywords" content="" />
<meta name="description" content=‘‘ />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>‘)
    </script>
<script type="text/javascript" src="js/jquery.LoadImage.js"></script>
<script type="text/javascript">
$(function(){
    $(".test").LoadImage(0,160,160,"loading.gif");
});
</script>
<style>
.load{text-align:center;width:99%;height:99%;background:url("loading.gif") center no-repeat}
.pic{text-align:center;float:left;width:24%;height:200px;}
.pic-title{clear:both;height:30px;}
.pic img{width:160px;height:160px;}
</style>
</head>

<body>

<div class="pic-list">

<div class=pic>
<img alt="" title="" src="http://i3.3conline.com/images/piclib/201004/27/batch/1/58761/127232496854943v5k3uijj.jpg*" class="test"/>
<div class=pic-title>图片描述</div>
</div>
    <div class=pic>
        <img alt="" title="" src="http://i3.3conline.com/images/piclib/201004/27/batch/1/58761/127232496854943v5k3uijj.jpg*" class="test"/>
        <div class=pic-title>图片描述</div>
    </div>

</div>
</body>
</html>

HTML

时间: 2024-10-07 18:34:45

图片延迟加载jquery插件imgLazyLoad(三)的相关文章

jquery.lazyload 实现图片延迟加载jquery插件

看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用J

插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数.方法和事件供图片的剪裁操作. 安装 可以通过Bower或NPM来安装该插件. 1 2 bower install cropper npm install cropper                使用方法 使用该图片剪裁插件首先要引入必要的js和css文件. 1 2

Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;

Lazy Load, 延迟加载图片的 jQuery 插件

本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能. Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服

Lazy Load, 延迟加载图片的 jQuery 插件(转)

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面. 这里

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

推荐两款简单好用的图片放大jquery插件

一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可js里加入 调用插件的函数 $('这里写要放大的图片').zoomify();如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数. 二.zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站.这个图片方法不是 单独图片跳脱出来的放

编写jQuery插件(三)——三个插件例子

封装jQuery对象方法的插件 表格隔行变色插件 CSS部分: .even{ background:#CCC; } .odd{ background:#666; } .selected{ background:#F90; } DOM结构: <table id="table1"> <tbody> <tr><th>选择</th><th>姓名</th><th>性别</th></t

图片放大镜——jQuery插件Cloud Zoom

下载地址:cloud_zoom.rar 图片放大镜效果是一种不错的效果,多应用于电子商务.图片展示等网站,给用户带来更好的体验.实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件.和其他产品相比,Cloud Zoom 具有代码少.功能多.兼容性好等特点,并且支持 Tint. Soft Focus 和 Inner 三种放大镜模式.在a标签中的rel属性设置不同的属性值,可以显示不同效果哦:1.默认模式:rel="adjustX: 10, adjust