Javascript preloader和load()命令出错

时间:2013-01-30 17:17:16

标签: javascript javascript-events

我正在编写一些按钮,其onclick命令加载外部html文件并更改图像的src。但是,在浏览器中打开.html文件后,我遇到了所有以简单ASCII显示的javascript代码,显然未执行! :(

编辑修复了“脚本类型”命令的问题。现在,好像脚本本身根本没有执行。关于可能出错的任何建议?

以下是代码:

<script='javascript'>

/*image preloader*/

incompanyImage = new Image(); 
incompanyImage.src = " http://us.123rf.com/400wm/400/400/dotshock/dotshock1211/dotshock121100869/16581370-group-of-happy-young-business-people-in-a-meeting-at-office.jpg"; 
/*alt image 1: http://www.123rf.com/photo_16522931_group-of-happy-young-business-people-in-a-meeting-at-office.html */
/*img source: http://www.123rf.com/photo_16581370_group-of-happy-young-business-people-in-a-meeting-at-office.html */

grupoImage = new Image(); 
grupoImage.src = " http://us.123rf.com/400wm/400/400/dotshock/dotshock1209/dotshock120901786/15403105-business-people-team-group-on-a-meeting-have-success-and-make-deal.jpg";
/*img source: http://www.123rf.com/photo_15403105_business-people-team-group-on-a-meeting-have-success-and-make-deal.html */
/*alt images */

particularImage = new Image(); 
particularImage.src = "http://us.123rf.com/400wm/400/400/auremar/auremar1210/auremar121001327/15672624-concerned-business-associates.jpg";
/*img source: http://www.123rf.com/photo_15672624_concerned-business-associates.html */
/*alt images  */

intensivoImage = new Image();
intensivoImage.src = "http://us.123rf.com/400wm/400/400/dotshock/dotshock1211/dotshock121100861/16581384-group-of-happy-young-business-people-in-a-meeting-at-office.jpg";
/*img source male:  http://www.123rf.com/photo_16580996_portrait-of-a-handsome-young-business-man-on-a-meeting-in-offce-with-colleagues-in-background.html */
/*img source female:  http://www.123rf.com/photo_16581362_business-woman-with-her-staff--people-group-in-background-at-modern-bright-office-indoors.html */

tecnicoImage = new Image();
tecnicoImage.src = "http://us.123rf.com/400wm/400/400/dotshock/dotshock1211/dotshock121100861/16581384-group-of-happy-young-business-people-in-a-meeting-at-office.jpg";
/*img source : http://www.123rf.com/photo_16581384_group-of-happy-young-business-people-in-a-meeting-at-office.html */
/*alt image: */


entrevistaImage = new Image();
entrevistaImage.src = "http://us.123rf.com/400wm/400/400/dotshock/dotshock1211/dotshock121100912/16581362-business-woman-with-her-staff--people-group-in-background-at-modern-bright-office-indoors.jpg";
/* img source: http://www.123rf.com/photo_16581362_business-woman-with-her-staff--people-group-in-background-at-modern-bright-office-indoors.html */
/* alt image (better): http://www.123rf.com/photo_16523034_group-of-happy-young-business-people-in-a-meeting-at-office.html */
/*http://www.123rf.com/photo_16523034_group-of-happy-young-business-people-in-a-meeting-at-office.html */

palestraImage = new Image();
palestraImage.src = "http://us.123rf.com/400wm/400/400/dotshock/dotshock1204/dotshock120400224/13112547-young-male-business-man-giving-a-presentation-at-a-meeting-seminar-at-modern-conference-room-on-a-ta.jpg";  
/*img source: http://www.123rf.com/photo_13112547_young-male-business-man-giving-a-presentation-at-a-meeting-seminar-at-modern-conference-room-on-a-ta.html */


/*these are the buttons for types of english classes offered*/
functon buttonInCompany()
{
$('#desc').load('incompany.html');
document.images["midimg"].src = incompanyImage.src;
}

functon buttonGrupo()
{
$('#desc').load('grupo.html');
document.images["midimg"].src = grupoImage.src;
}

functon buttonParticular()
{
$('#desc').load('particular.html');
document.images["midimg"].src = particularImage.src;
}

functon buttonIntensivo()
{
$('#desc').load('intensivo.html');
document.images["midimg"].src = intensivoImage.src;
}

function buttonEntrevista()
{
$('desc').load('entrevista.html');
document.images["midimg"].src = entrevista.html;    
}    

functon buttonTecnico()
{
$('#desc').load('tecnico.html');
document.images["midimg"].src = tecnicoImage.src;
}

function buttonPalestra()
{
$('#desc').load('palestra.html');
document.images["midimg"].src = palestraImage.src;
}

</script>

现在是HTML。

<div>
    <p style="text-align: center;"><img name="midimg" width="233" height="350"  class="art-lightbox" src="images/Fotolia_5170186_X-01.jpg"><br></p>
</div>
<div>
    <p class="desc" name="desc">hasdf</p>
</div>
  <div class="art-button" onClick:"buttonParticular()">Aulas Particulares</div>
  <div class="art-button" onClick:"buttonGrupo()">Aulas em Grupo</div>
  <div class="art-button" onClick:"buttonInCompany()">Aulas in-Company</div>
  <div class="art-button" onClick:"buttonIntensivo()">Aulas Intensivos</div>
  <div class="art-button" onClick:"buttonEntrevista()">Aulas para Entrevista</div>
  <div class="art-button" onClick:"buttonTecnico()"> Aulas sobre sua Area</div>
  <div class="art-button" onClick:"buttonPalestra()">Palestras</div>

我做错了什么?

先谢谢。

3 个答案:

答案 0 :(得分:1)

问题(正如其他人已评论过,但未作为答案发布)是您的开场<script='javascript'>。你在寻找:

<script type='text/javascript'>

另外:您的一些function声明拼写错误'functon'

您应该使用onclick而不是=

关注:
<div onclick="...">

答案 1 :(得分:0)

只需将<script='javascript'>更改为<script type='javascript'>即可。由于script浏览后没有空格,因此获取名为script='javascript'的标记(对其不熟悉)而不是script

此外:

<div class="art-button" onClick:"buttonParticular()">Aulas Particulares</div>

应该是

<div class="art-button" onClick="buttonParticular()">Aulas Particulares</div>

在html中,您应该在属性名称(在您的情况下为=)和值(onclick)之间放置"buttonParticular()"

答案 2 :(得分:0)

我接受了大家的建议,但它仍然没有执行图像或负载。在这里它再次,浓缩,没有预装载器 - 仍然没有功能。

 <script type="javascript">
 function buttonInCompany()
{
$('#desc').load('incompany.html');
document.images["midimg"].src = http://cageme.herokuapp.com/css/mrcage.jpg
}

 </script>

 <div onClick="buttonInCompany()">Everything is cage's cage.</div>

 <img name="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">