Question

参考这篇文章：How to display loading image while actual image is downloading 我有以下代码，但由于某种原因，我无法隐藏#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>

JS：

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

// main image loaded ?
$("#imgload").on('load', function(){
    // hide/remove the loading image
    $("#loader_img").hide();
});

任何帮助将不胜感激！谢谢！

Answer 1

图像的load事件几乎肯定会在之前触发事件。因为当你挂钩事件时它已被触发，你永远不会看到它发生。

此外，您开始隐藏图片（#imgload），但您从未显示。

为了确保您能够获得该活动，您必须在设置图片load之前挂钩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(); }

您还必须确保上面的代码在元素创建后运行。最好的方法是将包含代码之后的代码<{1}}放在所引用的元素中（通常在结束script代码之前放置它好）。作为第二个最佳解决方案，您可以使用jQuery的</body>函数。无论哪种方式，您仍然需要处理ready事件已被触发的可能性。

以下是一个例子：

＆＃13;
＆＃13;
load
＆＃13;
＆＃13;
＆＃13;

Answer 2

您好，您可以使用此方法。 jQuery.ready()我试过我的电脑，这样就可以了。顺便说一句，你忘了让＃＆＃34; imgload＆＃34;再次显示。

// 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
});

Answer 3

我认为脚本是在加载DOM之前执行的。拿你的剧本把它放在：

之间

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

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

为什么这个java脚本不起作用？

3 个答案: