IE 8-10 图片加载不出来
为什吗我的IE10——IE8图片都加载不出来，只有转圈圈的背景图？
Sweet_Gao
2016-04-27
5 回答
/*
2016-4-27 gaot
renderDom(): 渲染剩余的DOM(弹出层里面的内容)，并且插入到BODY
getGroup(): 根据当前组名获取同一组数据
init(currentObject): 初始化弹出：获取当前点击对象currentObj的data-source、data-id,调用showMaskAndPop()显示遮罩层和弹出层
showMaskAndPop(sourceSrc, currentId)：显示遮罩层和弹出层：根据当前元素的id和src加载图片、显示图片描述、设置左右切换按钮是否disabled
getIndexOf(currentId)：根据当前点击的元素ID获取在当前组别里面的索引
loadPicSize(sourceSrc)：加载图片: 调用preLoadImg(src, callback)、changePic(picWidth, picHeight)
preLoadImg(src, callback)：预加载图片，设置src
changePic(picWidth, picHeight)：根据图片宽高和视口比例设置弹出层尺寸并过渡动画、获取图片描述内容
goto(dir)：左右切换上一张或下一张。dir可为"next"或"prev"
*/
;(function(){
var LightBox = function(settings){
var _this_ = this; // this指的是LightBox
//默认配置参数
this.settings = {
speed: 500
};
$.extend(this.settings, settings||{});
//创建遮罩和弹出框
this.popMask = $('<div id="G-lightbox-mask">');
this.popWin = $('<div id="G-lightbox-pop">');
//保存BODY
this.bodyNode = $(document.body);
//渲染剩余的DOM，并且插入到BODY
this.renderDom();
this.picViewArea = this.popWin.find("div.lightbox-pic-view"); // 图片预览区域
this.popPic = this.popWin.find("img.lightbox-img"); // 图片
this.picCaptionArea = this.popWin.find("div.lightbox-pic-caption"); // 图片描述区域
this.nextBtn = this.popWin.find("span.lightbox-next-btn"); // "下一张"按钮
this.prevBtn = this.popWin.find("span.lightbox-prev-btn"); // "上一张"按钮
this.captionText = this.popWin.find("p.lightbox-pic-desc"); // 图片描述
this.currentIndex = this.popWin.find("span.lightbox-of-index"); // 图片索引
this.closeBtn = this.popWin.find("span.lightbox-close-btn"); // 关闭按钮
//准备开发事件委托，获取组数据
this.groupName = null; //组名
this.groupData = []; //防止同一组数据
this.bodyNode.delegate(".js-lightbox,*[data-role=lightbox]","click",function(e){
//阻止事件冒泡
e.stopPropagation();
var currentGroupname = $(this).attr("data-group");
if (currentGroupname != _this_.groupName) {
_this_.groupName = currentGroupname;
//根据当前组名获取同一组数据
_this_.getGroup();
}
//初始化弹出
_this_.initPop($(this));
});
//关闭弹出
this.popMask.click(function(){
$(this).fadeOut();
_this_.popWin.fadeOut();
_this_.clear = false; //关闭弹出，则清掉窗口调整事件
});
this.closeBtn.click(function(){
_this_.popMask.fadeOut();
_this_.popWin.fadeOut();
_this_.clear = false; //关闭弹出，则清掉窗口调整事件
});
//绑定上下切换按钮事件
this.flag = true; // 切换标识,用来表示一次切换是否完成,防止多次快速点击出错
this.nextBtn.hover(function(){
if (!$(this).hasClass("disabled") && _this_.groupData.length>1) {
$(this).addClass("lightbox-next-btn-show");
}
}, function(){
if (!$(this).hasClass("disabled") && _this_.groupData.length>1) {
$(this).removeClass("lightbox-next-btn-show");
}
}).click(function(e){
if (!$(this).hasClass("disabled") && _this_.flag) {
_this_.flag = false; // 一次切换动画过程中，flag设为false
e.stopPropagation();
_this_.goto("next"); // nextBtn: 切换到下一张
}
});
this.prevBtn.hover(function(){
if (!$(this).hasClass("disabled") && _this_.groupData.length>1) {
$(this).addClass("lightbox-prev-btn-show");
}
}, function(){
if (!$(this).hasClass("disabled") && _this_.groupData.length>1) {
$(this).removeClass("lightbox-prev-btn-show");
}
}).click(function(e){
if (!$(this).hasClass("disabled") && _this_.flag) {
_this_.flag = false; // 一次切换动画过程中，flag设为false
e.stopPropagation();
_this_.goto("prev"); // prevBtn: 切换到上一张
}
});
//判断是不是IE6
//this.isIE6 = /MSIE 6.0/gi.test(window.navigator.userAgent);
//绑定窗口调整事件
var timer = null;
this.clear = false; // 窗口调整事件标识,用来表示是否监听窗口调整事件。false表示不监听
$(window).resize(function(){
if (_this_.clear) {
window.clearTimeout(timer);
timer = window.setTimeout(function(){
_this_.loadPicSize(_this_.groupData[_this_.index].src);
}, 500);
if (_this_.isIE6) {
_this_.popMask.css({
width: $(window).width(),
height: $(window).height()
});
}
}
}).keyup(function(e){
var keyValue = e.which;
if (_this_.clear) {
if (keyValue==37 || keyValue==38) { //37:←方向键，38:↑方向键
_this_.prevBtn.click();
}else if (keyValue==39 || keyValue==40) { //39:→方向键，40:↓方向键
_this_.nextBtn.click();
}
}
});
};
LightBox.prototype = {
//渲染剩余的DOM，并且插入到BODY
renderDom: function(){
var strDom = '<div class="lightbox-pic-view">'
+ '<span class="lightbox-btn lightbox-prev-btn"></span>'
+ '<img class="lightbox-img" src="img/2-2.jpg">'
+ '<span class="lightbox-btn lightbox-next-btn"></span>'
+ '</div>'
+ '<div class="lightbox-pic-caption">'
+ '<div class="lightbox-caption-area">'
+ '<p class="lightbox-pic-desc">标题</p>'
+ '<span class="lightbox-of-index">当前索引:0 of 0</span>'
+ '</div>'
+ '<span class="lightbox-close-btn"></span>'
+ '</div>';
//插入到this.popWin
this.popWin.html(strDom);
//把遮罩和弹出框插入到BODY
this.bodyNode.append(this.popMask);
this.bodyNode.append(this.popWin);
},
//获取同一组数据
getGroup: function(){
var _this_ = this; // this指的是LightBox
//根据当前组别名称获取页面中所有相同组别的对象
var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");
//清空数组数据
_this_.groupData.length = 0;
groupList.each(function(){
_this_.groupData.push({
src: $(this).attr("data-source"), // this指的是当前遍历的data-group=_this_.groupName的元素
id: $(this).attr("data-id"),
caption: $(this).attr("data-caption")
});
});
//console.log(_this_.groupData);
},
//初始化弹出
initPop: function(currentObj){
var _this_ = this; // this指的是LightBox
var sourceSrc = currentObj.attr("data-source"),
currentId = currentObj.attr("data-id");
//console.log(sourceSrc+" "+currentId);
//显示遮罩层和弹框
this.showMaskAndPop(sourceSrc, currentId);
},
//点击图片显示遮罩层和弹框
showMaskAndPop: function(sourceSrc, currentId){
var _this_ = this; // this指的是LightBox
//图片和图片描述区域影藏
this.popPic.hide();
this.picCaptionArea.hide();
var winWidth = $(window).width(), // 当前视口宽度、高度
winHeight = $(window).height();
//图片预览区域宽、高
this.picViewArea.css({
width: winWidth/2,
height: winHeight/2
});
//遮罩层淡出
this.popMask.fadeIn();
//弹框淡出
this.popWin.fadeIn();
var viewHeight = winHeight/2+10;
//弹框宽、高和位置
this.popWin.css({
width: winWidth/2+10, //.lightbox-pic-view的border-width为5px
height: winHeight/2+10,
marginLeft: -(winWidth/2+10)/2,
top: -viewHeight
}).animate({
top: (winHeight-viewHeight)/2
}, _this_.settings.speed, function(){
//加载图片
_this_.loadPicSize(sourceSrc);
});
//根据当前点击的元素ID获取在当前组别里面的索引
this.index = this.getIndexOf(currentId);
var groupDataLength = this.groupData.length;
if (groupDataLength > 1) { // 如果一个组里的图片不止一张
if (this.index === 0) { // 点击的是第一张
this.prevBtn.addClass("disabled");
this.nextBtn.removeClass("disabled");
} else if (this.index === groupDataLength-1) { // 点击的是最后一张
this.prevBtn.removeClass("disabled");
this.nextBtn.addClass("disabled");
} else {
this.prevBtn.removeClass("disabled");
this.nextBtn.removeClass("disabled");
}
}else {
this.prevBtn.addClass("disabled");
this.nextBtn.addClass("disabled");
}
},
//根据当前点击的元素ID获取在当前组别里面的索引
getIndexOf: function(currentId){
var index = 0;
$(this.groupData).each(function(i){
index = i;
if (this.id === currentId) {
return false; // 相当于break
}
});
return index;
},
//加载图片
loadPicSize: function(sourceSrc){
var _this_ = this;
//每次加载之前先把上一次打开的图片的宽高清除掉，保证下一次加载的宽高是新打开的图片的宽高
this.popPic.css({width: "auto", height: "auto"}).hide();
this.picCaptionArea.hide();
// 预加载图片，设置scr
this.preLoadImg(sourceSrc, function(){
_this_.popPic.attr("src", sourceSrc);
var picWidth = _this_.popPic.width(),
picHeight = _this_.popPic.height();
// 根据图片宽高和视口比例设置弹出层尺寸并过渡动画、获取图片描述内容
_this_.changePic(picWidth, picHeight);
});
},
// 预加载图片，设置scr
preLoadImg: function(src, callback){
var img = new Image();
if (!!window.ActiveXObject) {
img.onreadystatechange = function(){
if (this.readystate == "complete") {
callback();
}
};
}else{
img.onload = function(){
callback();
};
}
img.src = src;
//console.log(img.src);
},
// 根据图片宽高和视口比例设置弹出层尺寸并过渡动画、获取图片描述内容
changePic: function(width, height){
var _this_ = this;
var winWidth = $(window).width(),
winHeight = $(window).height();
//如果图片的宽高大于浏览器视口的宽高比例，就看下是否溢出
var scale = Math.min(winWidth/(width+10), winHeight/(height+10), 1);
width = width*scale;
height = height*scale;
this.picViewArea.animate({
width: width-10,
height: height-10
}, _this_.settings.speed);
//弹窗动画：宽、高、位置
var top = (winHeight-height)/2;
if (this.isIE6) {
top += $(window).scrollTop();
}
this.popWin.animate({
width: width,
height: height,
marginLeft: -(width/2),
top: top
}, _this_.settings.speed, function(){
_this_.popPic.css({
width: width-10,
height: height-10
}).fadeIn();
_this_.picCaptionArea.fadeIn();
_this_.flag = true; // 一次切换动画结束，flag设为true
_this_.clear = true; // clear为true：弹框出现时，加上窗口调整事件
});
//设置描述文字和当前索引
this.captionText.text(this.groupData[this.index].caption);
this.currentIndex.text("当前索引：" + (this.index+1) + " of " + this.groupData.length);
//console.log(this.currentIndex.text());
},
//左右切换上一张或下一张
goto: function(dir){
if (dir === "next") { // 下一张：nextBtn
this.index++;
if (this.index >= this.groupData.length-1) { //如果是最后一张，影藏掉"下一张"按钮，设为不能点击
this.nextBtn.addClass("disabled").removeClass("lightbox-next-btn-show");
}
if (this.index !=0) { //如果不是第一张，"上一张"按钮去掉影藏样式
this.prevBtn.removeClass("disabled");
}
var src = this.groupData[this.index].src;
this.loadPicSize(src);
} else if (dir === "prev") { // 上一张：prevBtn
this.index--;
if (this.index <=0 ) { //如果是第一张，影藏掉"上一张"按钮，设为不能点击
this.prevBtn.addClass("disabled").removeClass("lightbox-prev-btn-show");
}
if (this.index != this.groupData.length-1) { //如果不是最后一张，"下一张"按钮去掉影藏样式
this.nextBtn.removeClass("disabled");
}
var src = this.groupData[this.index].src;
this.loadPicSize(src);
}
}
};
window["LightBox"] = LightBox;
})();<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LightBox插件开发</title>
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
</head>
<body>
class="js-lightbox"：表示这个元素要启用lightbox<br>
data-role="lightbox"：表示这个元素要启用lightbox<br>
data-source="img/1-1.jpg"：原图的地址<br>
data-group="group-1"：标识当前是否属于一个组别<br>
data-id="kggnnnmmm"：图片的唯一标识<br>
data-caption="kgg111"： 当前图片的描述文字<br><br>
<h1>1组图片</h1>
<div>
<img class="js-lightbox" data-role="lightbox" data-source="img/1-1.jpg" src="img/1-1.jpg"
data-group="group-1" data-id="1.1" data-caption="group1:1" width="100" height="100">
<img class="js-lightbox" data-role="lightbox" data-source="img/1-2.jpg" src="img/1-2.jpg"
data-group="group-1" data-id="1.2" data-caption="group1:2" width="100" height="100">
<img class="js-lightbox" data-role="lightbox" data-source="img/1-3.jpg" src="img/1-3.jpg"
data-group="group-1" data-id="1.3" data-caption="group1:3" width="100" height="100">
</div>
<h1>2组图片</h1>
<div>
<img class="js-lightbox" data-role="lightbox" data-source="img/2-1.jpg" src="img/2-1.jpg"
data-group="group-2" data-id="kggnnn2-1" data-caption="group2:1" width="100" height="100">
</div>
<!-- 遮罩层 -->
<!-- <div id="G-lightbox-mask"></div> -->
<!-- 弹出层 -->
<!-- <div id="G-lightbox-pop">
<div class="lightbox-pic-view">
<span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span>
<img class="lightbox-img" src="img/2-2.jpg" width="100%">
<span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span>
</div>
<div class="lightbox-pic-caption">
<div class="lightbox-caption-area">
<p class="lightbox-pic-desc">图片标题</p>
<span class="lightbox-of-index">当前索引:1 of 4</span>
</div>
<span class="lightbox-close-btn"></span>
</div>
</div> -->
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
$(function(){
var lightbox = new LightBox({
speed: 600,
maxWidth: 900,
maxHeight: 600,
maskOpacity: 0.4
});
});
</script>
</body>
</html>举报
0/150
提交
取消
