Javascript 为什么这个java脚本不工作？

关于这一职位： 我有以下代码，但由于某些原因，我无法隐藏#loader_img。我还想添加一个预加载程序，因为大图像确实很重，但如果可能的话，我想保持它的简单，因为我是javascript新手

<img id="loader_img" src="img/ajax-loader.gif" alt="Loading..." />
<div class="magnifier" style="height: 584px; width: 467px; margin: 20px;">
    <div class="maglens">
       <img id="imgload" src="img/largeimage.jpg" />
    </div>
</div>

---

任何帮助都将不胜感激！谢谢大家!

我认为脚本是在加载DOM之前执行的。 将脚本放在以下两个位置之间：

$(function () {
   //Your code here
});

---

这将确保代码在加载DOM后运行。

图像的

load

事件几乎肯定会在钩住事件之前触发。因为当你钩住事件时它已经被触发了，你永远不会看到它发生

此外，您开始隐藏图像（

#imgload

），但之后再也不会显示它

为确保获得事件，必须在设置图像的

src

之前挂起

加载

或者，您可以使用图像的
complete
属性来了解图像是否已加载：

// show loading image
$("#loader_img").show();
$("#imgload").hide();

// main image loaded ?
var img = $("#imgload");
if (img[0].complete) {
    imageDone();
} else {
    img.on('load', imageDone);
}

function imageDone() {
    // hide/remove the loading image
    $("#loader_img").hide();
    // And show the image!
    img.show();
}

您还必须确保上述代码在创建元素后运行。最好的方法是将包含代码的
脚本
标记放在它在HTML中引用的元素之后（通常放在关闭
标记之前）。作为第二个最佳解决方案，您可以使用jQuery的
ready
函数。无论哪种方式，您仍然需要处理
load
事件已经触发的可能性

下面是一个例子：


加载
（function（）{//避免创建全局变量
//显示加载图像
$（“#loader_img”）.show（）；
$（“#imgload”）.hide（）；
//主图像已加载？
var img=$（“imgload”）；
如果（img[0]。完成）{
控制台日志（“完成”）；
imageDone（）；
}否则{
日志（“等待加载”）；
图像打开（“加载”，图像完成）；
}
函数imageDone（）{
控制台日志（“已加载”）；
//隐藏/删除正在加载的图像
$（“#loader_img”）.fadeOut（）；
//并显示图像！
img.show（）；
}
})();
您好，您可以使用此方法
jQuery.ready（）
我已经在我的电脑上试过了，这样没问题。
顺便说一句，你忘了让“imgload”再次出现

// show loading image
$("#loader_img").show();
$("#imgload").hide();

// main image loaded ?
$("#imgload").ready(function(){
    // hide/remove the loading image
    $("#loader_img").hide();
    $("#imgload").show();  // show the loaded img again
});

你能复制完整的代码吗？？？还可以设置一个调试点并进行检查。通过这种方式，您可以检查流是否真的达到了该点“这可能是一个愚蠢的语法错误”好吧，您不必猜测——您在web控制台中看到了什么？如果这是完整的代码，
}）将不关闭任何内容。缺少的行可能是
$（function（）{
@fabiopoli加载侦听器如何？需要关闭该函数。@fabiopoli:不，它会关闭
。
上调用它上面的三行。（缩进会很好…）缺少结束括号。谢谢@J.T Crowder，我正在尝试使用您的示例。我唯一的问题似乎是加载程序似乎没有在图像加载之前“等待”。我有一个“放大镜”类，因此我希望在加载程序运行之前加载放大和缩小的版本。我已经更新了代码，以便您可以了解我的意思：）@莎拉：对我来说，它似乎消失得并不太早。我已经切换到一张更大的图片，而且由于从图像加载点到浏览器实际显示它需要一段时间，我已经更新以淡出加载的图像，而不是立即删除它。我不会看到它在图像出现之前消失。谢谢@t.J Crowder，它现在似乎正在工作！因为我正在本地测试它，这可能是问题的一部分。非常感谢您的帮助！！：）如果我将完全相同的代码应用于一个类或#而不是img#有关系吗？我尝试将代码中的#imgload更改为.magnifier，只是因为我不希望放大的图像出现在图像指针之前钉子，也就是说，我希望“加载程序”在缩略图加载之前保持不变，但即使我不更改代码，它也不起作用…@Sara:不，没关系。：-）
// show loading image
$("#loader_img").show();
$("#imgload").hide();

// main image loaded ?
$("#imgload").ready(function(){
    // hide/remove the loading image
    $("#loader_img").hide();
    $("#imgload").show();  // show the loaded img again
});