我在使用Easy Rotator时遇到了一些问题（加载图像并在幻灯片放映中显示）。如果我不使用jquery .load方法加载包含要加载的代码的.html文件，该脚本可以正常工作.html文件的代码如下所示。谢谢你的时间！
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 550px; height: 360px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:false, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-67-97-109-114-105-110-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47'}" data-erName="Our Brands">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
<li>
<img class="main" src="imgs/slideshow/Maxxim_ChickenCoating.jpg" />
<img class="thumb" src="imgs/slideshow/Maxxim_ChickenCoating.jpg" />
</li>
<li>
<img class="main" src="imgs/slideshow/Maxxim_ChipFlixcanisters1.jpg" />
<img class="thumb" src="imgs/slideshow/Maxxim_ChipFlixcanisters1.jpg" />
</li>
<li>
<img class="main" src="imgs/slideshow/Maxxim_NatureValley.jpg" />
<img class="thumb" src="imgs/slideshow/Maxxim_NatureValley.jpg" />
</li>
<li>
<img class="main" src="imgs/slideshow/Maxxim_Tortillas.jpg" />
<img class="thumb" src="imgs/slideshow/Maxxim_Tortillas.jpg" />
</li>
<li>
<img class="main" src="imgs/slideshow/Maxxim_UrbanClassics1.jpg" />
<img class="thumb" src="imgs/slideshow/Maxxim_UrbanClassics1.jpg" />
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplateName="NONE" style="">
<div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:70px;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0px; top:0; bottom:0; right:0px;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
<div class="" style="background: #000; background: rgba(0,0,0,0.85); position: absolute; left: 0; right: 0; bottom: 0; padding: 5px; color: #FFF; font-family: Arial; font-size: 12px;">
<p class="erimgMain_title" style="padding: 0; margin: 0 0 3px 0; font-weight: bold;"></p>
<p class="erimgMain_desc" style="padding: 0 0 10px 0; margin: 0;"></p>
</div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;"></div>
</div>
<div class="erimgMain rotatorTileNav" style="position: absolute; left:0;right:0;bottom:0;height:80px;" data-erConfig="{numTiles:-1, scaleMode:'fillArea', imgType:'thumb', loopNextButton:false, arrowButtonMode:'rollover', __slideLinkEvent:'rollover'}">
<div style="position: absolute; left: 0; top: 10px; right: 0; bottom: 0; background: #FFF;"></div>
<div class="erimgMain_slides" style="position: absolute; left:0px; top:0; bottom:0; right:0px;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 10px; bottom: 0; margin: 2px 1px;"></div>
<!-- <div class="" style="background: #555; position: absolute; left: 1px; right: 1px; top: 10px; bottom: 0; padding: 5px; color: #FFF; font-family: Arial; font-size: 12px; text-align: center;">
<p class="erimgMain_title" style="padding: 5px; margin: 0 0 3px 0; font-weight: bold;"></p>
</div> -->
<div class="selectionArrow visibleWhenSelected" style="position: absolute; top: 0; left: 50%; margin-left: -10px; width: 20px; height: 10px; background-image: url('http://easyrotator.s3.amazonaws.com/1/i/rotator/FFF_arrow10_export.png');"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 60px; top: 50%; margin-top: -10px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 60px; top: 50%; margin-top: -10px;"></div>
</div>
<div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
<br /><br />
Need a powerful <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">Flash slideshow</a> creator with built-in iPhone/iPad/Android support? EasyRotator is supported by the <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">XML Flash Slideshow v4 Software</a>.
<br /><br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
</div>
<noscript>
Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy <a href="http://www.dwuser.com/easyrotator/">jQuery slider</a> builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
我找到了问题，以下代码段： 数据erConfig =“{autoplayEnabled：假
应更改为data-erConfig =“{autoplayEnabled：true
谢谢！
答案 0 :(得分：1)
由于代码经过严格压缩，因此很难理解这里出了什么问题。我可能会建议添加一个样式表来删除“样式”＆＃39;你的html元素上的属性。
正如我所说，我不确定这个问题，但我确实有一个潜在的解决办法。 jQuery .load方法非常不可靠，这是由jQuery自己承认的。因此，我为我的所有网站提出了解决方法。
使用javascript我创建一个图像，然后使用
检测图像是否完全加载image.complete
和
image.height
如果＆＃39;身高＆＃39;或者＆＃39;完成＆＃39;解析为false然后我知道它还没有完成加载。
我建议远离插件并自己编写。这将使您更好地控制脚本的工作方式。此外，它将使您在这种情况下更容易调试。
使用以下代码检测图像是否已加载：
// Add any global images that you would like to preload
var images = new Array('http://example.com/images/logo.png');
this.image = new Array();
function preload(){
// Any images that are not in the above array but are present on the page, add them
$('img').each(function(){
var src = $(this).attr('src');
if(src!=''&&typeof src!='undefined'&&images.indexOf(src)==-1){
images.push(src);
}
});
// Loop through the array and create an 'image' for each image src
for(var i=0; i <images.length;) {
this.image[i] = new Image();
this.image[i].src = images[i];
this.image.onload=i++;
}
loaded();
}
function loaded(){
// Presume the images are loaded by setting the flag to true
var i,flag=true;
// Loop through all of the images
for(i=0;i<this.image.length;i++){
// If an image has not completely loaded then set the flag to false
if(!this.image[i].complete||!this.image[i].height){
flag=false;
break;
}
}
if(flag){
// If the flag is true then all the images are loaded so run the initialize function
initialize();
}else{
// If the images are not loaded then run the function again in 0.1 seconds
setTimeout("loaded()", 100);
}
}