Javascript照片幻灯片不显示图像

我正在使用一个简单的JavaScript幻灯片，但在显示图片时遇到问题。在类似图片#13之后，我开始获得红色的X图像占位符。不知道为什么，因为如果我右键单击图像并转到属性并检查图像源，它确实存在。我总共有126张照片，每张照片的平均大小约为1.7MB。我注意到IE的内存使用率可以高达1GB

我在SharePoint 2007页面上播放了此幻灯片

<!-- Original Source http://www.scribd.com/doc/13618938/Add-a-Slide-Show-on-a-Share-Point-Site-Using-Javascript-HTML-and-Content-Editor-Web-Part -->

<script language="javascript" type="text/javascript">

var folderDir = "/images/my-images_2012/"
var slideShowSpeed = 3000
var crossFadeDuration = 3

// Specify the image files 
var Pic = new Array()
var i=1

for (var k=1;k<=126;k++)
{
     Pic[i] = folderDir +  "ENC_2012_0" + k + ".JPG"
     i++
}

var t
var j = 1
var p = Pic.length

var preLoad = new Array() 
for (i = 1; i < p; i++){
                preLoad[i] = new Image()
                preLoad[i].src = Pic[i]
}

//------------------------------------------------------------------
// The function to do the "slide show"
//------------------------------------------------------------------

function runSlideShow()
{

    if (document.all){ 
                document.images.SlideShow.style.filter="blendTrans(duration=2)" 
                document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDu ration)"
                document.images.SlideShow.filters.blendTrans.Apply()
    }

    document.images.SlideShow.src = preLoad[j].src

    if (document.all){ 
        document.images.SlideShow.filters.blendTrans.Play() 
    }

    j=j+1 

    if (j > (p-1)) j=1
    t = setTimeout('runSlideShow()', slideShowSpeed) 
}

// Add the following line to get the JS to run 
_spBodyOnLoadFunctionNames.push("runSlideShow"); 

</script>


<DIV align=left>
<TABLE style="BACKGROUND-COLOR: #288118; BORDER-SPACING: 0px; WIDTH: 358px; BORDER-COLLAPSE: collapse; HEIGHT: 341px" cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD></TD></TR>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD style="BACKGROUND-COLOR: #288118" height=300 width=300>
<P align=left><IMG name=SlideShow align=left src="/images/my-images_2012/ENC_2012_01.JPG" width=334 height=300></P> </TD></TR></TBODY></TABLE></TD>
<TR>
<TD></TD></TR>
<TR></TR></TBODY></TABLE></DIV>

var folderDir=“/images/my-images_2012/”
var slideShowSpeed=3000
var crossFadeDuration=3
//指定图像文件
var Pic=新数组（）
变量i=1
对于（var k=1；k（p-1））j=1
t=setTimeout（'runSlideShow（）'，slideShowSpeed）
}
//添加以下行以运行JS
_spBodyOnLoadFunctionNames.push（“runSlideShow”）；

您同时加载了126幅图像。每个大约

1.7MB

，即您试图立即加载的大约

214.2MB

坏主意

尝试改用缩略图，或者至少按顺序加载图像：

var current = 0;
function imgLoaded() {
    if(current > 0){ // Remove the previous event listener.
        preLoad[current - 1].onload = null;
    }
    preLoad[current] = new Image();
    preLoad[current].src = Pic[current];
    current++;
    if(current < p){
        preLoad[current-1].onload = imgLoaded;
    }
}
imgLoaded();

var电流=0；
函数imgLoaded（）{
如果（当前>0）{//删除上一个事件侦听器。
预加载[当前-1]。onload=null；
}
预加载[当前]=新图像（）；
预加载[current].src=Pic[current]；
电流++；
如果（电流

---

（未经测试，但应该可以正常工作）

这里有一点Javascript noob。不知道如何在我的代码中包含它。用我的代码替换：

for（i=1；i

，应该可以了。（这是您的

“执行“幻灯片放映”的函数”注释之前的
for
循环。

获取错误：

无法设置属性“onload”的值：行
预加载[current]上的对象为null或未定义的
。onload=imgLoaded（）。哎呀，删除那一行中的
（）
（更新的答案）；您是否删除了
var preLoad=new Array（）
？（若你们确实这么做了，把它加回去）使用1.7米大小的照片不是一个好做法，把它们向上滑动更糟糕。尝试更改图片的格式（例如jpeg）并设置为较小的大小，例如（宽度=334高度=300）。