当前位置: 58彩票app下载 > 计算机网络 > 正文

一个图片切换的插件,的重复加载错误以及修复

时间:2019-09-18 11:14来源:计算机网络
分析代码也可以知道。 最主要的原因是 写在页面上的 img src="the_big_img_toLoad.jpg"/一经加载,就去向服务器申请图片地址,加载大图片。 如果想实现原定的效果,则 写在页面上的待加载

分析代码也可以知道。
最主要的原因是 写在页面上的 <img src="the_big_img_toLoad.jpg" />一经加载,就去向服务器申请图片地址,加载大图片。
如果想实现原定的效果,则 写在页面上的待加载地址 必须不能是大图片的地址,而我们可以将真正的图片地址数据 存储在alt属性中。
正确的例子如下:

以下是参数说明:

复制代码 代码如下:

 参数名称  描述
 delay  图片切换速度,单位毫秒
 maskOpacity  遮罩层透明度,1为不透明,0为全透明
 numOpacity  数字按钮透明度,1为不透明,0为全透明
 maskBgColor  遮罩层背景色
 textColor  标题字体颜色
 numColor  数字按钮字体颜色
 numBgColor  数字按钮背景色
 alterColor  数字按钮选中项字体颜色
 alterBgColor  数字按钮选中项背景颜色

<a href="#nogo"><img alt="//www.jb51.net/comstyles/img200-150-3.jpg" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="//www.jb51.net/comstyles/img200-150-4.jpg" src="" alt="200-150" /></a>

插件代码及调用

对原来的 jquery.lazyload.js我们也需要做一点改动:

  • 插件名称:ImageScroll

复制代码 代码如下:

复制代码 代码如下:

<script type="text/javascript" src=";
<script type="text/javascript" src="lazyload.js"></script>
<script type="text/javascript"> //初始化代码
$(document).ready(function(){
$("#lazy1 img,#lazy2 img").lazyload({
placeholder : "",
effect : "fadeIn"
});
});
</script>

(function($){
$.fn.ImageScroll = function(options) {
var defaults = {
delay: 2000,
maskOpacity: 0.6,
numOpacity: 0.6,
maskBgColor: "#000",
textColor: "#fff",
numColor: "#fff",
numBgColor: "#000",
alterColor: "#fff",
alterBgColor: "#999"
};
options = $.extend(defaults, options);
var _this = $(this).css("display", "none");
var _links = [], _texts = [], _urls = [];
var _list = _this.find("a");
var _timer;
var _index = 0;
_list.each(function(index){
var temp = $(this).find("img:eq(0)");
_links.push($(this).attr("href"));
_texts.push(temp.attr("alt"));
_urls.push(temp.attr("src"));
});
if(_list.length <= 0) {
return;
}
else {
_this.html("");
}
var _width = _this.width();
var _height = _this.height();
var _numCount = _list.length;
var _numColumn = Math.ceil(_numCount / 2);
var _img = $("<a/>").css({"display":"block", "position":"absolute","top":"0px","left":"0px", "z-index":"2", "width":_width+"px", "height":_height+"px", "background":"url("+_urls[0]+")"}).appendTo(_this);
var _mask = $("<div/>").attr("style","opacity:"+options.maskOpacity)
.css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index":"3", "width":_width+"px", "height":"46px", "opacity":options.maskOpacity, "background-color":options.maskBgColor}).appendTo(_this);
var _num = $("<div/>").attr("style","opacity:"+options.numOpacity)
.css({"position":"absolute", "right":"0px", "bottom":"0px", "z-index":"5", "width":_numColumn*22, "opacity":options.numOpacity, "height":"44px"}).appendTo(_this);
var _text = $("<div/>").css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index":"4", "padding-left":"10px", "height":"44px", "line-height":"44px", "color":options.textColor}).html(_texts[0]).appendTo(_this);
for(var i = 0; i < _numCount; i++)
{
$("<a/>").html(i+1)
.css({"float":"left", "width":"20px", "height":"20px", "text-align":"center", "background-color":options.numBgColor, "margin":"0px 2px 2px 0px", "cursor":"pointer", "line-height":"20px", "color":options.numColor})
.mouseover(function() {
if(_timer) {
clearInterval(_timer);
}
}).mouseout(function() {
_timer = setInterval(alter, options.delay);
}).click(function(){
numClick($(this));
}).appendTo(_num);
}
var _tempList = _num.find("a");
function alter() {
if(_index > _numCount-1) {
_index = 0;
}
_tempList.eq(_index).click();
}
function numClick(obj) {
var i = _tempList.index(obj);
_tempList.css({"background-color":options.numBgColor, "color":options.numColor});
obj.css({"background-color":options.alterBgColor, "color":options.alterColor});
_img.attr({"href":_links[i], "target":"_blank"})
.css({"opacity":"0", "background":"url("+_urls[i]+")"})
.animate({"opacity":"1"}, 500);
_text.html(_texts[i]);
_index = i + 1;
}
setTimeout(alter, 10);
_timer = setInterval(alter, options.delay);
_this.css("display", "block");
};
})(jQuery);

完整实例如下:

  • 调用代码

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
img{ display:block; border:2px solid #ccc; margin:0 0 10px;}
</style>
<script type="text/javascript" src=";
<script type="text/javascript" src="lazyload.js"></script>
<script type="text/javascript"> //初始化代码
$(document).ready(function(){
$("#lazy1 img,#lazy2 img").lazyload({
placeholder : "",
effect : "fadeIn"
});
});
</script>
</head>
<body>
<div style=" height:900px; width:400px; background:#eee;">
<a href="#nogo"><img src="" alt="200-150" /></a>
第一屏高度为900px,滚动到下面的时候,相应图片才开始加载
</div>
<div id="lazy1" style="width:350px; margin-bottom:340px;">
<a href="#nogo"><img alt="" src="" alt="400-300" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
</div>
<div id="lazy2" style="width:350px;">
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
<a href="#nogo"><img alt="" src="" alt="200-150" /></a>
</div>
</body>
</html>

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.ImageScroll.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#scroll { position:relative; width:450px; height:300px; }
-->
</style>
<div id="scroll">
<a href=" src="images/1.jpg" alt="漂亮的风景图片一" /></a>
<a href="//www.jb51.net"><img src="images/2.jpg" alt="漂亮的风景图片二" /></a>
<a href=" src="images/3.jpg" alt="漂亮的风景图片三" /></a>
<a href=" src="images/4.jpg" alt="漂亮的风景图片四" /></a>
<a href=" src="images/5.jpg" alt="漂亮的风景图片五" /></a>
<a href=" src="images/3.jpg" alt="漂亮的风景图片六" /></a>
</div>
<script>
$("#scroll").ImageScroll();
</script>

测试可知 是真正的按需加载。而不是像之前,先加载了,滚动到相应位置 还又加载了一次。
Firebug的眼睛还是雪亮的。

  • 运行结果

您可能感兴趣的文章:

  • jQuery.lazyload+masonry改良图片瀑布流代码
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  • jquery插件lazyload.js延迟加载图片的使用方法
  • jQuery lazyLoad图片延迟加载插件的优化改造方法分享
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • jquery lazyload延迟加载技术的实现原理分析
  • 修改jquery.lazyload.js实现页面延迟载入
  • jquery.lazyload 实现图片延迟加载jquery插件
  • 详解jQuery lazyload 懒加载

图片 1

  • 带参数调用

复制代码 代码如下:

<script>
$("#scroll").ImageScroll({delay:500, maskBgColor:"#ff0000"});
</script>

  • 运行结果
    图片 2
    小结
      只是个小插件,可定制性可能不是很好,大家随便看看和修改好了,貌似IE8好像还有个小bug,一会修正了再上传,大家有什么bug发现,请回复告诉我,方便我及时修正,有代码上的优化意见,也请告诉我,帮助我这个新人学习,=.=

您可能感兴趣的文章:

  • Highslide JS
  • jquery.lazyload 实现图片延迟加载jquery插件
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • JQuery Jcrop 实现图片裁剪的插件
  • jquery插件lazyload.js延迟加载图片的使用方法
  • jQuery Lightbox 图片展示插件使用说明
  • 基于jQuery图片平滑连续滚动插件
  • 基于Jquery插件开发之图片放大镜效果(仿淘宝)
  • jquery图片播放浏览插件prettyPhoto使用详解
  • jQuery中图片展示插件highslide.js的简单dom

编辑:计算机网络 本文来源:一个图片切换的插件,的重复加载错误以及修复

关键词: