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 イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

クロスブラウザーで一貫して確実に動作しません 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません DOM ツリーを正しくバブルアップしません 既に存在する画像の起動が停止する可能性がありますブラウザのキャッシュに

より良い解決策は、CSS で画像を非表示にし、load イベントが発生した後に画像をフェードインすることです。

(結果が混在する可能性があり、空白のページを表示しているユーザーは、アニメーションが完了する前に、ブラウザーに不具合があると考えて再読み込みボタンを押す可能性があるため、ブラウザーの動作を許可することよりもさらに良い場合があります。... フレンドリーな警告です。この種の DOM 操作は、ユーザーの行動に意図しない副作用をもたらすことがあります!)

于 2012-11-06T20:52:36.177 に答える
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 に答える
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 も読み込まれるという保証はありません。

jQueryにはすでにfadeInという関数があり、名前空間が異なっていても、私には悪い考えのように思えますが、実際には関数fadeInも呼び出しています。

于 2012-11-06T20:53:33.360 に答える
0

nJQuery JavaScript ファイルへの正しいリンクがあることを確認してください。例として Google のホストされたライブラリを使用するか、この .js ファイルの独自のコピーを作成できます。

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

min.js ファイルは、JQuery 公式 Web サイトのダウンロード セクションにあります。保存して、Web サイトのフォルダーに配置します。そして、次のようにリンクします。

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