4

私はウェブサイト (jQuery + Ajax) を開発していますが、問題に遭遇しました。ページが動的にロードされるとき (初めて、画像はまだキャッシュされていません)、画像は表示されません。ajax load 関数を思い出すと、突然私の写真がそこにありました。

$("#overlayInner").load(source+" #loader",function() {
     $('#workImgs').nivoSlider();
});

ローダー div の外にある動的ページで nivoSlider を呼び出すので、このページに直接アクセスした人も画像を見ることができます。

<script type="text/javascript">
   $(function(){
     $('#workImgs').nivoSlider();
   });
</script>

Ajax を使用せずにページを読み込もうとすると、画像が正常に読み込まれます。

何か案は？

4

2 に答える 2

0

あなたのウェブサイトで実験を行うのは難しいです :) しかし、各読み込みページ (4d.html、dokerpoot.html、および vuylsteke.html) に画像のプリロード用のコード (bodyタグの先頭) を追加してみてください。vylsteke.html のサンプル画像を使用しました。

<script type="text/javascript">
var images = [
    'images/work/kapsalon2.jpg',
    'images/work/kapsalon3.jpg',
    'images/work/kapsalon4.jpg'
];

$(images).each(function() {
    $('<img/>')[0].src = this;
});
</script>

フラグメント ロード関数getは、返されたドキュメントを解析してコンテナーの ID を持つ要素を見つけた後、最初にこれらの画像をメモリにロードし、次にドキュメントの解析を開始し、最後に Nivoslider を初期化するという考え方です。おそらくそれは役立つでしょう。

于 2012-04-27T09:26:22.493 に答える
0

データベースからコンテンツをロードする際にこの問題が発生しました。画像に幅または高さが設定されていないことが原因であることが判明しました。これは、プラグインが画像のサイズを認識せず、表示しなかったことを意味しますが、再読み込み後にブラウザがこれらのプロパティを計算したため、2 回目に表示されました。

幅と高さを設定するとこれが解決しました。

于 2012-05-04T09:46:55.543 に答える