0

ここでこのjqueryスクリプトを何時間もいじっています：

http://www.graphicbeacon.com/web-design-development/how-to-create-a-background-scrolling-effect-with-jquery/

サイトの背景画像効果として使用しているため、ページの読み込みの間に表示される画像の白い背景を取り除くために。

2 つの .png 画像を使用し、css で背景色を透明に設定し、さらにフェードイン効果を追加しました。

FF と Opera ではちらつきは見られませんが、IE、Chrome、Safari ではページを切り替えるときにちらつきが見られます。

ここには（おそらく単純な）解決策があると確信していますが、それを見つけたり、自分で理解したりすることはできません。

さらに、可能かどうか、各ページの読み込み時にスクリプトを読み込む必要がないことを知りたいです。つまり、ページを切り替えるときにスクリプトを実行し続ける必要がありますか?

私に何かアドバイスをくれる人はいますか？とても有難い！

4

1 に答える 1

0

いくつかのリンクを含むローカル コピーを作成したので、内容を確認できます。ページのリロード時、または別のリンクを呼び出すと、コンテンツがすぐに更新されます。これは、私のコンピューターのすべてのブラウザーで発生します。Safari 6、Chrome 24、Firefox 18 でテストしました。コンテンツが毎回新しくレンダリングされるため、これは解決できない問題です。ただし、ページの読み込みごとにアニメーションを再起動しない方法についての追加の質問で解決します。

アニメーションを実行し続けたい場合や、ページのコンテンツを切り替えたい場合は、AJAXを使用します。AJAX を使用すると、ページ全体を更新しなくても、リクエストを送信してレスポンスを取得できます。例：

HML

<!-- div that holds the content - use this in addition to your background divs -->
<div id="content"></div>

JavaScript

$.ajax({
    // the page with the content, you could use a HTML file for every section on your page
    url: "content.html",
    cache: false
}).done(function( html ) {
        // .done() handles the response, this time we replace the content of our div
        $("#content").html(html);
});

content.html

<!-- can be any valid HTML and JavaScript -->
<p>Hey, this is nice</p>

履歴書

これを使用すると、アニメーションが実行され続け、ページを再レンダリングするときに点滅せず、必要なすべてのコンテンツをロードできます。

続きを読む

jQuery.ajax()

ノート

あなたが使用しているスクリプトは、2010 年から私の Intel Core Duo i5 でいくらかのコンピューティングを引き起こし、時々遅れていました。最新のブラウザーでCSS トランジションを使用すると、全体的なパフォーマンスを向上させることができます。多くの JavaScript を実行する必要がないため、CPU の使用量が少なくなり、よりスムーズに表示されます。

また、スクリプトは を使用していevalます。これを読んでくださいJavaScript eval 関数を使用するのはなぜ悪い考えですか? アイデアを得て、それを使用している部分を書き直してみてください。簡単にできると思います（コードを深く調べていませんでした）。

これがあなたの助けになり、あなたの側で素晴らしい解決策になることを願っています.

于 2013-02-03T09:16:38.630 に答える