Question

我使用的是简单的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>

Answer 1

您正在同时加载126张图片。每个约1.7 MB，即 214.2 MB ，您尝试立即加载。

糟糕的主意。

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

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

（未经测试，但这应该有效）

Javascript照片幻灯片不显示图像

1 个答案: