JavaScript错误on load图像fadein

我在脚本上遇到了不一致的错误。通常，一切都可以正常工作，但是，我时不时会收到以下错误：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>

再次，这些图像在大多数时候都在加载和褪色，但是时不时地我会收到错误，并且图像不会淡入。

有更好的方法可以解决这个问题吗？还是我缺少的东西？

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

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

...这是一个部分解决方案，但不是真的，因为很可能，您的<img/>标签带有on load hardCoded to nove tok youth of to nofe。

由于您无论如何都在使用jQuery，因此您应该看这样的东西：

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

并从您的IMG标签中摆脱过硬编码的ONLOAD。

也应注意，.load（）API页面上列出了警告：

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

加载事件的警告与图像一起使用
一个常见的挑战开发人员试图使用.load（）快捷方式解决求解时，是在完全加载图像（或图像集合）时执行功能。有几个已知的警告应注意。这些是：
它不始终如一，也不可靠地跨浏览器如果图像SRC与以前相同它没有正确地冒出dom树可以停止开火，以获取已经生活在浏览器缓存中的图像

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

。

（甚至比这更好的是要让浏览器行为混合在一起，因为您的结果可能会混合在一起，而看到空白页的用户可能会按下"重新加载"按钮，以为您的动画完成之前就会想到他们的浏览器小故障。友好的警告，这些DOM操作有时可能会对用户行为产生意外的副作用！）

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

您缺少准备好文档，因此未加载jQuery，并且未定义fadein函数。即使加载了图像，也无法保证加载jQuery。

您实际上也称您的功能Fadein，而JQuery已经具有称为Fadein的函数，即使它们具有不同的名称空间，对我来说似乎是一个坏主意。

nplease确保您具有与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>

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/

相关内容

最新更新

热门标签：