Question

我的脚本出现了不一致的错误。通常情况下一切正常，但是，我偶尔会收到以下错误：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>

同样，图像在大多数时间都在加载和淡出，但偶尔我会得到错误并且图像不会淡入。

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

Answer 1

您需要确保在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页面上列出了警告：

来自docs（http://api.jquery.com/load-event/）：

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

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

它不能一致地工作，也不能可靠地跨浏览器   如果图像src设置为与之前相同的src，则它在WebKit中无法正确触发   它没有正确地冒泡DOM树   可以停止触发已经存在于浏览器缓存中的图像

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

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

Answer 2

您可以尝试直接在脚本中定义处理程序，而不是在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>

Answer 3

你遗漏了一份文件，所以没有加载jQuery，并且没有定义fadeIn函数。即使加载了图像，也不能保证jQuery也会被加载。

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

Answer 4

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

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

min.js文件位于download section of JQuery official website。保存并放入网站文件夹。并将其链接为：

<script src="/js_folder/jquery-1.8.2.min.js"></script>

Answer 5

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/

Javascript错误onload图像淡入淡出

5 个答案: