`
jiakechong
  • 浏览: 208078 次
社区版块
存档分类
最新评论

jquery 高级教程$jQuery图片预加载插件

阅读更多
http://www.117178.com/jsxiangguan/20100327/2kz8w2z5f11997579703.html


<script>
/*jQuery图片预加载插件。 DevByCssRain.cn*/
jQuery.fn.loadthumb=function(options){
options=$.extend({
  src:""
},options);
var_self=this;
_self.hide();
varimg=newImage();
$(img).load(function(){
  _self.attr("src",options.src);
  _self.fadeIn("slow");
}).attr("src",options.src); //.atte(&qujquery视频教程ot;src",options.src)要放在load后面,
return_self;
}

$jquery入门教程(document).ready(function(){
varlen =$(".num>li").length;
varindex=0;
varadTimer;
$(".numli").mouseover(function(){
  index =  $(".numli").index(this);
  showImg(index);
}).eq(0).mouseover();
//滑入停止动画,滑出开始动画.
$('.ad').hover(function(){
   clearInterval(adTimer);
  },function(){
   adTimer=setInterval(function(){
      index++;
    if(index==len){index=0;}
    showImg(index);   
    },5000);
}).trigger("mouseleave");
});

functionshowImg(index){
  //定义图片的src
  varsrc=;
  //运用图片预加载插件
  $(".jquery ajax getadimg").loadthumb({src: src});
  $(".numli").removeClass("on")
   .eq(index).addClass("on");
}

</script>
<divclass="ad"><imgalt=""src="../images/1.gif"/>
<ulclass="num">
   <li>1</li&gjquery 日期插件t;
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
</div>
分享到:
评论

相关推荐

    jquery图片预加载

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

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

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

    jquery 预加载图片

    &lt;title&gt;jQuery预加载图片示例 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;script src="jquery.preload.js"&gt; 预加载图片"&gt; $(function() { // 预加载图片 $.preload(['...

    jQuery实现图片预加载

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

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

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

    jquery图片预加载延迟加载

    在jQuery中,我们可以创建一个函数来预加载图片,例如: ```javascript function preloadImages(imgArray) { jQuery.each(imgArray, function(i, src) { var img = new Image(); img.src = src; }); } ``` 在这...

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

    jQuery图片预加载插件通常通过创建一个`&lt;img&gt;`元素,设置其`src`属性为待加载的图片URL,然后将其隐藏或者移除。由于浏览器会自动加载`&lt;img&gt;`元素的`src`属性所指向的资源,这样图片数据就会在后台被加载到浏览器...

    使用jQuery实现图片预加载和自动等比例缩放插件

    本教程将详细讲解如何使用`jQuery`实现图片预加载和自动等比例缩放功能,创建一个高效、响应式的图片插件。 一、图片预加载 图片预加载技术是为了提升用户体验,避免用户在浏览网页时因为图片加载缓慢而看到空白...

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

    2. **使用懒加载插件**:如`jquery.lazyload.js`,它会自动监控图片进入视口的事件,从而延迟加载。 3. **图片格式选择**:根据需要选择适合的图片格式,如WebP、JPEG 2000等,它们通常具有更好的压缩效果,能减小...

    JS加载load图片jquery.LoadImage图片预加载(逐渐加载)demo

    在这个项目中,`jquery.LoadImage`是一个基于jQuery的插件,专门用于图片预加载。它的工作原理是利用JavaScript的`new Image()`对象创建一个隐藏的图片元素,然后设置其`src`属性为待加载的图片URL,浏览器就会开始...

    jquery插件,图片预加载,自适应宽高的图片slide,autoimgv1.1

    《jQuery插件:图片预加载与自适应宽高的图片Slide——深入解析autoimgv1.1》 在网页设计和开发中,优化用户体验是至关重要的,尤其是在处理图像资源时。"autoimgv1.1"是一款基于jQuery的插件,它专门解决了图片预...

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

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

    jquery处理图片预加载

    "jQuery处理图片预加载"是一种优化策略,它旨在解决这个问题。预加载技术允许我们在用户实际看到图片之前就开始下载它们,从而提高页面的整体加载速度。 jQuery是一款广泛使用的JavaScript库,它提供了一种简便的...

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

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

    jquery.LoadImage图片预加载.zip

    总的来说,jQuery LoadImage插件凭借其易用性和高效性,成为了前端开发中处理图片预加载问题的理想选择。无论你是新手还是经验丰富的开发者,都能快速上手并享受到它带来的好处。在优化网站性能,提升用户体验的道路...

    jQuery图片预加载代码.zip

    `jQuery图片预加载代码`是利用JavaScript库jQuery和特定的插件,如`ydxLazyLoad.js`,来实现这一功能。这种技术允许在用户实际看到图片之前就开始加载,从而减少了页面首次加载的时间,提高了页面性能。 jQuery是一...

    jquery图片延迟加载

    2. **预加载策略**:对于重要图片,比如页面顶部的大图,可以考虑在页面加载时就进行预加载,防止用户在滚动时出现明显的加载延迟。 3. **动画效果**:加载图片时,可以添加过渡效果,比如淡入、渐显,提升用户体验...

    图片预加载

    5. 使用预加载特效插件:如果你需要更复杂的效果,可以考虑使用现成的jQuery预加载插件,例如"图片预加载特效"这个文件可能就是一个这样的插件。安装和使用这类插件通常只需要引入插件文件,然后按照文档配置即可。 ...

    js图片预加载

    例如,一个简单的jQuery预加载插件可能如下: ```javascript (function($) { $.fn.preload = function() { return this.each(function() { $('&lt;img/&gt;')[0].src = this; }); }; })(jQuery); // 使用插件 $('...

Global site tag (gtag.js) - Google Analytics