0

マウスオーバー スクリプトに問題があります。すべてが正常に機能しますが、解決方法がわからない小さな問題があります。より正確には、mouseover スクリプトはグレースケールの画像ホバー効果を作成します。ページが読み込まれると、色付きの画像が短時間 (1 秒以下) 表示され、JavaScript が適用されてすべてグレー表示されます。

JavaScriptが適用される前に色付きの画像が表示されないようにするにはどうすればよいですか? 基本的に、ページが読み込まれた後ではなく、グレースケールの画像が表示されるようにします。出来ますか？

スクリプトはこちらで、問題のウェブページはこちらでご覧いただけます。

4

1 に答える 1

1

HTMLから画像を削除し、動的にロードします。

<a class="placeholder" href=""></a>のプレースホルダーとして使用し<img src="" />、リンクを非表示にするか、デザインに合うようにスタイルを設定します。

$('a.placeholder').each(function() {
    var src = $(this).attr('href');
    var image = new Image(); // this is not yet visible in the DOM.
    image.onload = grayscale; // change the grayscale function to accept
                              // event parameters
    image.src = src; // this triggers the onload event which
                                     // grayscales the image
    var dom_image = $('<img />').attr('src', src);
    $(this).replaceWith(dom_image);
});

もちろん、ウィンドウのロードではなく、ドキュメントの準備ができているときに上記を実行する必要があります。

于 2012-06-27T21:43:09.093 に答える