0

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

我在 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>
4

1 回答 1

0

You're loading 126 images at the same time. At about 1.7 MB each, that's about 214.2 MB you're trying to load at once.

Bad idea.

Try using thumbnails instead, or at least load the images sequentially:

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();

(Not tested, but this should work)

于 2012-12-28T11:57:42.820 回答