1

我的脚本出现不一致的错误。很多时候一切正常，但是，我时不时地收到以下错误：ReferenceError: fadeIn is not defined

以下是相关代码：

在里面<head>

    <script type="text/javascript" charset="utf-8">
        window.fadeIn = function(obj) {
            var item = $(obj).parent();
            item.fadeIn(1000);
        }
    </script>

在里面<body>

 <div class="item" style="display:none"><img onload="fadeIn(this)" src="/uploads/thumbs/{{image.url}}"><br>{{ image.description }}</div>

同样，图像大部分时间都在加载和淡入淡出，但时不时地我得到错误并且图像不会淡入。

有没有更好的方法来解决这个问题？或者只是我缺少的东西？

4

5 回答 5

3

您需要确保在 DOM 准备好之后加载您的代码。

window.onload = function(){
    var fadeIn = function(obj) {
         var item = $(obj).parent();
         item.fadeIn(1000);
    };
};

...这是一个部分修复，但不是真的，因为您的<img/>带有硬编码 onload 的标签很可能会在该方法可用之前尝试触发该方法。

既然你无论如何都在使用 jQuery，你应该看看这样的东西：

$(function() {
    $(".item img").load(function(){
         $(this).fadeIn(1000);
    });
});

并从您的 img 标签中删除硬编码的 onload。

还应注意，.load() API 页面上列出了一些注意事项：

从文档（http://api.jquery.com/load-event/）：

与图像一起使用时加载事件的注意事项

开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行一个函数。应该注意几个已知的警告。这些都是：

它不能始终如一地工作，也不能可靠地跨浏览器 如果图像 src 设置为与以前相同的 src，则在 WebKit 中无法正确触发在浏览器的缓存中

更好的解决方案可能是使用 CSS 隐藏图像，然后在触发加载事件后，将它们淡入。

（比这更好的是让浏览器行为，因为您的结果可能是混合的，并且看到空白页面的用户可能会在您的动画完成之前认为他们的浏览器出现故障而点击重新加载按钮......只是一个友好的警告这些类型的 DOM 操作有时会对用户行为产生意想不到的副作用！）

于 2012-11-06T20:52:36.177 回答
0

您可以尝试直接在脚本中定义处理程序，而不是在 HTML 中分配它。

Javascript

<script type="text/javascript" charset="utf-8">
 $(function() {
       $('img').load(function() {  
             var item = $(this).parent();
             item.fadeIn(1000);
       });
  });

</script>

HTML

<div class="item" style="display:none">
 <img onload="fadeIn(this)" src="/uploads/thumbs/{{image.url}}">
     <br>{{ image.description }}</div>
于 2012-11-06T20:52:31.113 回答
0

您缺少准备好的文档，因此未加载 jQuery，并且未定义 fadeIn 函数。即使图像被加载，也不能保证 jQuery 也被加载。

您实际上还调用了您的函数fadeIn，而jQuery 已经有一个名为fadeIn 的函数，即使它们有不同的命名空间，这对我来说确实是个坏主意。

于 2012-11-06T20:53:33.360 回答
0

n请确保您有正确的 JQuery javascript 文件链接。您可以使用 Google 的托管库作为示例，也可以创建自己的 .js 文件副本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

min.js 文件可以在JQuery 官网的下载部分找到。保存并放入网站文件夹。并将其链接为：

<script src="/js_folder/jquery-1.8.2.min.js"></script>
于 2012-11-06T20:54:13.283 回答
0

Jquery 的另一个选项：

<div class="item" style="display:none">
    <a href="http://docs.jquery.com/">
        <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif">
    </a>
    <p>image name</p>
</div>​

脚本：

<script type="text/javascript">
    $(document).ready(function() {
        $('.item').delay('1000').fadeIn('1000');
​    });​
</script>

http://jsfiddle.net/CYGNp/1/

于 2012-11-06T21:02:43.727 回答