$(document).ready(function(){
/*************初始化***************/
var _img=[];//图片对象全局变量 var adjustDiv=function(){//调整DIV宽度和高度
var winHeight=$(window).height();
var winWidth=$(window).width();
$('#bgImgPPT2').css('height',winHeight);
$('#bgImgPPT2').css('width',winWidth);
//alert(winHeight+' and '+winWidth);
}
var adjustImg=function(_width,_height){//自动调整图片大小_width=>图片宽度,_height=>图片高度
var winHeight=$(window).height();//窗口高度
var winWidth=$(window).width();//窗口宽度
//alert(_width+' and '+_height);
var needH=winHeight+150;//实际需要的高度
var needW=winWidth;//实际需要的宽度
//alert(needH+' and '+needW);
var _tempW=_width;//缓存宽度
var _tempH=_height;//缓存高度
var newWH=[];//需要返回的数组
if(_tempH<=needH){//先调整高度或者宽度
//alert('高度过小');
_tempH=needH;
_tempW=(_tempH/_height)*_width;
}
if(_tempW<=needW){//若宽度未达到,调整宽度,同时调整高度
var _tempW1=_tempW;
_tempW=needW;
_tempH=(_tempW/_tempW1)*_tempH;
}
newWH['height']=_tempH;
newWH['width']=_tempW;
return newWH;
}
var initPpt=function(){//初始化,主要是获得pageCounter的pages参数
$('#bgImgPPT2').html('');
var imgArr=[];//图片数组
$.ajax({
url:'/moudle/data/?action=data&pageSize=100&page=1&groupID=8&label=&extend=all&partition=&r='+new Date(),
type:'post',
dataType:'xml',
async:false,
success:function(dataXML){
$(dataXML).find('root').find('extend1').each(function(){
imgArr.push($(this).text());
});
}
});
//console.log(imgArr.length);
/*********自动调整图片及DIV大小********/
adjustDiv();
//alert(imgArr[1]);
/****图片预加载****/
/*for(var j=0;j<_img.length;j++){
//alert(_img[j].src);
var imgObj=_img[j];
imgObj.onload=function(){
var _width=imgObj.width;
var _height=imgObj.height;
_tempWH=adjustImg(_width,_height); $('#bgImgPPT2').children('#index_'+j).attr('src',imgObj.src).width(_tempWH['width']).height(_tempWH['height']);
}
}*/
for(var i=0;i<imgArr.length;i++){
_img[i]=new Image();
_img[i].src=imgArr[i];
$('#bgImgPPT2').append('<img id="index_'+i+'" src="/template/27/img/loading.gif" class="zhanwei"/>');
}
//console.log(_img.length);
/****图片预加载****/
/*********自动调整图片及DIV大小********/
}
/*************初始化**************//****************幻灯片*********************/
initPpt();//初始化
var ppt= '';
var bgImgPPTLength = $("#bgImgPPT2").children("img").length;
var imgIndex=0;
function pptSwitch(){
var bgImgPPT = $("#bgImgPPT2").children("img");
if(imgIndex%2==0){
if(imgIndex>=bgImgPPT.length){
console.log(_img[imgIndex]);//这个地方却显示undefined
console.log(_img.length);/*这个地方很神奇,可以显示长度为6*/
bgImgPPT.eq(imgIndex).animate({'top':'-50px'},2500).fadeOut(250);
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1);
bgImgPPT.eq(0).fadeIn(250);
//clearInterval(ppt);
imgIndex=0
/*ppt = setInterval(function(){
pptSwitch(imgIndex);
},3000);*/
}else{
bgImgPPT.eq(imgIndex).animate({'top':'-50px'},2000).fadeOut(250).next('img').fadeIn(250);
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1)
imgIndex++;
}
}else{
if(imgIndex>=bgImgPPT.length){
//console.log(imgIndex);
bgImgPPT.eq(imgIndex).animate({'top':'-150px'},2000).fadeOut(250)
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1)
bgImgPPT.eq(0).fadeIn(250);
//clearInterval(ppt);
imgIndex=0;
/*ppt = setInterval(function(){
pptSwitch(imgIndex);
},3000);*/
}else{
bgImgPPT.eq(imgIndex).animate({'top':'-150px'},2000).fadeOut(250).next('img').fadeIn(250)
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1)
imgIndex++;
}
}
}
ppt = setInterval(function(){
pptSwitch();
},2500);
/************************幻灯片************************/});
请问诸位这是怎么回事啊?
代码如下
$(function(){
/*************初始化***************/
var _img=[];//图片对象全局变量 var adjustDiv=function(){//调整DIV宽度和高度
var winHeight=$(window).height();
var winWidth=$(window).width();
$('#bgImgPPT2').css('height',winHeight);
$('#bgImgPPT2').css('width',winWidth);
//alert(winHeight+' and '+winWidth);
}
var adjustImg=function(_width,_height){//自动调整图片大小_width=>图片宽度,_height=>图片高度
var winHeight=$(window).height();//窗口高度
var winWidth=$(window).width();//窗口宽度
//alert(_width+' and '+_height);
var needH=winHeight+150;//实际需要的高度
var needW=winWidth;//实际需要的宽度
//alert(needH+' and '+needW);
var _tempW=_width;//缓存宽度
var _tempH=_height;//缓存高度
var newWH=[];//需要返回的数组
if(_tempH<=needH){//先调整高度或者宽度
//alert('高度过小');
_tempH=needH;
_tempW=(_tempH/_height)*_width;
}
if(_tempW<=needW){//若宽度未达到,调整宽度,同时调整高度
var _tempW1=_tempW;
_tempW=needW;
_tempH=(_tempW/_tempW1)*_tempH;
}
newWH['height']=_tempH;
newWH['width']=_tempW;
return newWH;
}
var initPpt=function(){//初始化,主要是获得pageCounter的pages参数
$('#bgImgPPT2').html('');
var imgArr=['img/test.jpg','img/test2.jpg','img/test3.jpg','img/test4.jpg','img/test5.jpg'];//图片数组
//console.log(imgArr.length);
/*********自动调整图片及DIV大小********/
adjustDiv();
//alert(imgArr[1]);
/****图片预加载****/
/*for(var j=0;j<_img.length;j++){
//alert(_img[j].src);
var imgObj=_img[j];
imgObj.onload=function(){
var _width=imgObj.width;
var _height=imgObj.height;
_tempWH=adjustImg(_width,_height); $('#bgImgPPT2').children('#index_'+j).attr('src',imgObj.src).width(_tempWH['width']).height(_tempWH['height']);
}
}*/
for(var i=0;i<imgArr.length;i++){
_img[i]=new Image();
_img[i].src=imgArr[i];
$('#bgImgPPT2').append('<img id="index_'+i+'" src="img/loading.gif" class="zhanwei"/>');
$('#bgImgPPT2').children('#index_'+i).width($(window).width()).height($(window).height());
}
//console.log(_img.length);
/****图片预加载****/
/*********自动调整图片及DIV大小********/
}
/*************初始化**************/
/****************幻灯片*********************/
initPpt();//初始化
var ppt= '';
var bgImgPPTLength = $("#bgImgPPT2").children("img").length;
var imgIndex=0;
function pptSwitch(){
var bgImgPPT = $("#bgImgPPT2").children("img");
//console.log(_img[imgIndex]);
//alert(judgeLoad(_img[imgIndex]));
//alert(_img[imgIndex].complete);
if(judgeLoad(_img[imgIndex])){
//alert('加载完成');
var _width=_img[imgIndex].width;
var _height=_img[imgIndex].height;
//alert(_width+' and '+_height);
_tempWH=adjustImg(_width,_height);//获得调整后的尺寸
_img[imgIndex].width=_tempWH['width'];
_img[imgIndex].height=_tempWH['height'];
//alert(_tempWH['width']+' and '+_tempWH['height']);
//alert(imgIndex);
//alert(bgImgPPT.children('#index_'+imgIndex).attr('src'));
$("#bgImgPPT2").children('#index_'+imgIndex).replaceWith(_img[imgIndex]);
};
if(imgIndex%2==0){
if(imgIndex>=bgImgPPT.length-1){
//console.log(_img.length);
bgImgPPT.eq(imgIndex).animate({'top':'-50px'},2500).fadeOut(250);
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1);
bgImgPPT.eq(0).fadeIn(250);
//clearInterval(ppt);
imgIndex=0
/*ppt = setInterval(function(){
pptSwitch(imgIndex);
},3000);*/
}else{
bgImgPPT.eq(imgIndex).animate({'top':'-50px'},2000).fadeOut(250).next('img').fadeIn(250);
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1)
imgIndex++;
}
}else{
if(imgIndex>=bgImgPPT.length-1){
//console.log(imgIndex);
bgImgPPT.eq(imgIndex).animate({'top':'-150px'},2000).fadeOut(250)
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1)
bgImgPPT.eq(0).fadeIn(250);
//clearInterval(ppt);
imgIndex=0;
/*ppt = setInterval(function(){
pptSwitch(imgIndex);
},3000);*/
}else{
bgImgPPT.eq(imgIndex).animate({'top':'-150px'},2000).fadeOut(250).next('img').fadeIn(250)
bgImgPPT.eq(imgIndex).animate({'top':'-100px'},1)
imgIndex++;
}
}
}
/******************幻灯片******************/
/************************自动执行**************************/
ppt = setInterval(function(){
pptSwitch();
},2500);
/************************自动执行************************/
});
var judgeLoad=function(imgObj){//imgObj=>图片对象,判断图片是否加载成功
var isLoad=false;
if($.browser.msie){
if($.browser.version==6.0){
imgObj.onreadystatechange = function () {
if (imgObj.readyState == "complete"){
isLoad=true;
}
};
}else{
ie7imagetime = window.setInterval(function(){
var rs = imgObj.readyState;
if(rs=="complete"){
window.clearInterval(ie7imagetime);
isLoad=true;
}else{
return;
}
},200);
}
}else{
imgObj.onload = function () {
if (imgObj.complete == true){
isLoad=true;
}
};
}
return isLoad;
}judgeLoad()是图片预加载用的,但是尽管图片已经加载完了,但是其却一直显示false,这个到底是怎么回事啊
或者哪位高手有更好的兼容各浏览器的判断图片是否加载完成的代码,请分享一下啊!