JQuery(document).ready 没有加载答案

【问题标题】：JQuery(document).ready is not loadingJQuery(document).ready 没有加载
【发布时间】：2015-02-16 08:32:10
【问题描述】：

我发现 Image Power Zoomer v1.1 对我的项目很有用并下载了它。这与代码一起工作正常

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
 $('#myimage').addpowerzoom({
 defaultpower: 2,
 powerrange: [2,5],
 largeimage: null,
 magnifiersize: [100,100] //<--no comma following last option!
});
});
</script>

<body>
    <img id="myimage" src="ocan.png" style="width:600px; height:600px" />
</body>

但是，当我在需要集成到项目中的下一页中使用此缩放器时，它不起作用。代码如下（代码更多用于画布中的注释。但易于理解。不需要加载图像即可工作）。我在我的项目中使用struts2和tiles（我添加这个认为这可能会产生一些影响)

<%@ taglib uri="/struts-tags" prefix="s" %>

<head>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($){ 
     $('#original').addpowerzoom({
     defaultpower: 2,
     powerrange: [2,5],
     largeimage: null,
     magnifiersize: [100,100] /* <--no comma following last option! */
    });
    });
</script>

<style>
    #myCanvas { 
        background:url("<s:property value='resultFileName'/>") ;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    #myCanvas,#tempcanvas{ 
        cursor: pointer;
        border:1px solid black; 
        position:absolute;
        margin-left: 0px;   
        margin-bottom: 20px;                
    }

    #myCanvas:active, #tempcanvas:active { 
        cursor: crosshair;
    }       

    input[type = button],input[type = submit], select{
        width:100px;
        margin:10px 0 10px 0;
        border-radius:5px;
        font-family: Cursive;
        padding: 5px;
     }

     form, input[type = button], input[type = submit]{
        position:relative;              
     }

     input[type = image]{
        border:none;
        width: auto;
        height: auto;
        padding: 0;
        margin-top: 50;
        border-radius:0;
     }

</style>        
</head>     

<body style="margin-left: 200px">

<div class="form_content">

    <!-- ___________________________________Original image_______________________________ -->

    <div class="just_heading">Original Image</div>
    <img id="original" alt="Error loading the image" src="<s:property value='originalFileName'/>" width="664" height="585"/> <br><br>


    <!-- ___________________________________Result image_______________________________ -->

    <div class="just_heading">Result Image</div>
    <img id="result" src="<s:property value='resultFileName'/>" hidden="true" alt="result image" width="565" height="584"/>
    <canvas id="myCanvas" width="664" height="585" style="border:1px solid #d3d3d3;">
        Please use a modern browser like Firefox, Chrome, Safari
    </canvas>
    <canvas id="tempcanvas" width="664" height="585" style="border:1px solid #d3d3d3;"></canvas>

    <div>
        <canvas id="canvas2" width="664" height="585" hidden="true" style="left:600; top:10; position:obsolute;"></canvas>
        <input type="image" id="canvasImg" name="canvasImg" hidden="true"> 
        <img alt="Error loading the result" src="<s:property value='resultFileName'/>" width="664" height="585"/>
    </div>

    <!-- _______________________________Previous annotated image______________________________ -->

    <div class="just_heading">Annotated Images</div>
    <s:iterator value="annotatedImageDetails">
    <tr>
        <td><span class="just_message">Annotated by <s:property value="AnnotatedBy"/><br></span></td>
        <td><img alt="No annotated Image found" src="<s:property value="AnnotatedImageName"/>" width="664" height="585"/></td>
    </tr>
    <br><br>
    </s:iterator>
    <!--  ______________________________Script Starts here____________________________________  --> 

</div>

</body>

【问题讨论】：

你在控制台看到了什么？
您检查控制台是否有错误？仅仅说“它不起作用”是不足以让别人帮助你的信息。
您是否尝试使用$(document).ready(function() { /* my code */ } ); 代替？您还应该注意使用最新 JQuery 版本中的加载事件的新语法：$(function() { /* my code */ } );。试试这些。
@RoryMcCrossan 控制台没有错误。当我们将鼠标悬停在图像上时必须出现的放大镜没有出现。
我把你的代码放在一个 JSbin 中，它似乎可以工作：jsbin.com/cofapedaga/1/edit?html,js,output 也许是浏览器问题？你用的是哪一个？

标签： javascript jquery

【解决方案1】：

我注意到您在第二个示例中切换了脚本声明。

我检查过，似乎 ddpowerzoomer.js 正在使用 jQuery。实际上，它正在为您创建一个 jQuery 函数。您必须在执行 ddpowerzoomer.js 之前实例化 jQuery，否则它将无法工作。

<head>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>

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

【讨论】：

和@Gauillaume 一样，让它在本地工作，我只是粘贴了你的代码并添加了我自己的图像。您是否尝试关闭和打开 javascript？ :P
当按原样复制粘贴时，他在 JSbin 中使用的相同代码在我的本地系统中为我工作。我想知道发生了什么......！