`
catastiger
  • 浏览: 138432 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

图片预加载插件

    博客分类:
  • HTML
 
阅读更多
/*
**************图片预加载插件******************
///作者:没剑(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!")
        });
        
    });
}
分享到:
评论

相关推荐

    图片预加载插件preloadjs

    **preloadjs 图片预加载插件详解** 在Web开发中,图片预加载是一项重要的优化技术,它可以提升用户体验,确保图片在需要时能够迅速显示。preloadjs 是一款强大的JavaScript库,专为实现资源预加载而设计,包括图片...

    jQuery图片预加载插件源码.zip

    本文将深入探讨jQuery中的图片预加载插件,并结合源码分析其工作原理和应用。 一、jQuery图片预加载的必要性 图片预加载的主要目的是提高页面的响应速度和流畅度。尤其在滚动加载、轮播图、游戏等需要快速展示图片...

    jquery图片预加载

    **jQuery图片预加载技术详解** 在网页开发中,图片预加载是一种优化用户体验的重要技术,尤其在Web和移动端,用户往往期望页面能快速显示并流畅运行。`jQuery`库以其简洁的API和强大的功能,成为实现图片预加载的...

    preload.js图片预加载插件

    图片预加载插件。包含有序加载和无序加载两种。具体使用方法,参考https://blog.csdn.net/yang1393214887/article/details/92582715

    图片预加载

    三、jQuery图片预加载插件的实现 jQuery是一款广泛使用的JavaScript库,它提供了丰富的API和插件,使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤: 1. 引入jQuery库:在HTML文件中,你需要...

    JS图片预加载插件详解

    JS图片预加载插件是实现该技术的一种有效手段,其核心作用是提前加载图片资源,确保当用户需要查看这些图片时,它们可以迅速地从本地缓存中渲染出来,从而提升应用的响应速度和流畅度。 懒加载(也称为延迟加载)是...

    jquery 预加载图片

    本话题主要围绕"jQuery 预加载图片"这一主题展开,我们将深入探讨jQuery库如何帮助开发者实现图片预加载功能。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等多个方面的工作...

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...

    原生无依赖预加载插件

    原生无依赖预加载插件是一种专门用于优化网页性能的技术,尤其在JavaScript开发中,它扮演着提升用户体验的关键角色。预加载技术的核心是预先获取用户可能需要但尚未立即使用到的资源,如图片、音频、视频或脚本,...

    jQuery实现图片预加载

    本文将详细探讨如何使用jQuery实现图片预加载,并分享一个基于jQuery的预加载插件的使用方法。 首先,了解预加载的基本概念。图片预加载是指在用户实际看到图片之前,就已经在后台开始加载图片资源。这样做的好处...

    微信小程序-图片预加载组件

    在微信小程序开发中,图片预加载是一个非常关键的优化步骤,尤其对于图片密集型的应用,如电商、社交或媒体类应用。预加载技术允许开发者在用户实际需要之前提前下载图片资源,减少用户等待时间,提升用户体验。本篇...

    jQuery图片预加载代码ydxLazyLoad.js插件

    本文将详细介绍基于jQuery的图片预加载插件——ydxLazyLoad.js。 ### 1. 图片延迟加载(懒加载) 懒加载(Lazy Load)是一种优化网页性能的技术,它只加载视窗内或接近视窗的图片,当用户滚动页面时,再加载其他...

    jquery图片预加载延迟加载

    在网页设计和开发中,图片预加载和延迟加载是两种重要的优化策略,它们可以显著提升网站性能和用户体验。本文将详细探讨使用jQuery实现这两种技术,以及它们如何协同工作以优化页面打开速度。 首先,让我们理解预...

    js图片预加载

    jQuery提供了一种更简洁的API来处理DOM操作,因此有许多预加载插件可以帮助我们更方便地实现图片预加载。例如,一个简单的jQuery预加载插件可能如下: ```javascript (function($) { $.fn.preload = function() { ...

    图片预加载、占位背景图jquery plugin

    jQuery预加载插件的工作原理是,创建`&lt;img&gt;`元素并设置其`src`属性为需要加载的图片URL,浏览器会自动开始下载图片,而无需等待其他脚本执行完毕。 这个特定的jQuery插件可能提供了以下特性: 1. **批量预加载**:...

    jquery实现图片预加载技术,使得图片加载更为流畅,和谐。

    为了提高页面加载效率和用户浏览的流畅性,我们可以采用图片预加载技术。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,可以帮助我们实现这一目标。本篇文章将深入探讨如何使用jQuery实现图片预加载,...

    带有图片预加载技术的jquery图片幻灯代码.rar

    这个名为"带有图片预加载技术的jquery图片幻灯代码.rar"的压缩包文件提供了一个实现这一目标的实例,它是一个基于jQuery库的图片幻灯插件。下面将详细解释这个插件的工作原理、涉及的技术以及其对网页性能的影响。 ...

    jQuery 图片切换预加载插件,左右带控制按钮 修正版本.zip

    这个“jQuery 图片切换预加载插件,左右带控制按钮 修正版本.zip”文件显然包含了一个专门针对图片切换功能的jQuery插件,特别优化了用户体验,提供了左右控制按钮,并且修复了一些已知问题。 首先,让我们详细了解...

Global site tag (gtag.js) - Google Analytics