此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

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

  1. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

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

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  3. 延迟加载图片的 jQuery 插件：Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

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

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

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

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

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

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

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

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

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

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

随机推荐

  1. secureCRT背景颜色设置

    1. Options->Global Options->Advanced select 'Monochrome'  click 'Edit' button normal: Backgrou ...

  2. python复习

    1.input和raw_input的区别 input假设输入的都是合法的python表达式,如输入字符串时候,要加上引号,而raw_input都会将所有的输入作为原始数据 2.原始字符串前面加上r,e ...

  3. 02python算法-二分法简介

    老规矩: 什么是二分法: 其实是一个数学领域的词,但是在计算机领域也有广泛的使用. 为什么需要二分法? 当穷举算法性能让你崩溃时. 二分法怎么用呢? 让我们先玩一个游戏先,我心里想一个100以内的整数 ...

  4. SSD固态硬盘的闪存芯片颗粒介绍

    固态硬盘凭借其存取速率超快等自身优势,被越来越多的电脑爱好者所青睐,并迅速普及到了广大用户的电脑中,因为固态硬盘与传统机械硬盘相比,确实在运行效率等方面有了质的提升,这里先了解一些评判固态硬盘优劣的知 ...

  5. fiddler使用教程

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  6. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

  7. 使用触发器实现记录oracle用户登录失败信息到alert.log日志文件

    前面我们说了用oracle自带的审计功能可以实现记录用户登录失败日志到数据表中(链接:http://www.54ok.cn/6778.html).今天我们来分享一下如何把用户登录失败信息记录到aler ...

  8. 53. Android常用工具类

    主要介绍总结的Android开发中常用的工具类,大部分同样适用于Java.目前包括HttpUtils.DownloadManagerPro.ShellUtils.PackageUtils.Prefer ...

  9. 使用Chrome或Fiddler抓取WebSocket包

    首先,HTTP是建立在TCP协议基础上的,而WebSocket通常也是建立在TCP上,所以说为什么有些网页游戏抓不到包而有些又可以,这仅是因为你使用的抓包工具是针对了HTTP的通信协议. 我先从抽象的 ...

  10. Android成长日记-Noification实现状态栏通知

    Notification可以作为状态栏的通知,实现这个效果需要使用NotificationManager实现控制类,才能实现对这个效果的显示 下面是实现状态栏显示效果的通知: 1. 首先在Layout ...