6

画像ギャラリーの jQuery Cycle を実行しています。リンクを表示:こちら

私の問題は、Firefox で表示すると画像がつぶれてしまうことです。ページを再読み込みすると、問題はなくなります。これにより、すべての画像が読み込まれる前に Javascript がトリガーされていると思われます (通常、最初の画像は正常に機能し、残りは押しつぶされます)。

ハード リフレッシュは、問題を再現します。

すべてを $(document).ready(function(){ }); でラップしました。しかし、それはまだ起こります。

追加情報:画像の幅と高さを指定すると、すべて正常に動作します。ただし、すべて異なるサイズの何百もの画像があります..

私はこの問題にかなりイライラしています。どんなアイデア/助けも大歓迎です!

これが私のコードです：

$(document).ready(function(){
//function onBefore(curr,next,opts) {
//    var $slide = jQuery(next);
//    var w = $slide.outerWidth();
//    var h = $slide.outerHeight();
//    $slide.css({
//        marginTop: (482 - h) / 2,
//        marginLeft: (560 - w) / 2
//    });
//};

// Decare the function that center the images...
function onBefore(curr,next,opts) {
    var $slide = jQuery(next);
    var w = $slide.outerWidth();
    var h = $slide.outerHeight();
    $slide.css({
        marginTop: (480 - h) / 2,
        marginLeft: (560 - w) / 2
    });
};


$(document).ready(function() {
    $('#slideshow').cycle({
     fx:     'fade', 
    next:   '#next', 
    pause: 0,
    speed: 500,
    before: onBefore,
    prev:   '#prev',
    pause:  '#pause',
    pager:  '.thumbs',
    pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
    pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
                        //Change height of thumbnail here
                         return '<li><a href="#"><img src="' + slide.src + '" height="90" /></a></li>'; 
                    
                } 
    });});});
4

7 に答える 7

12

この問題を解決するために私が使用した、すでに提案されているものよりもはるかに単純でクリーンなソリューションがあります。

jQuery を使用すると、特定の状況では$(window).load代わりに使用する必要があります。$(document).readyこの問題を解決するには、次のように変更します。

$(document).ready(function() {
  $('#slideshow').cycle({
    /* ... */
  });
});

これに：

$(window).load(function() {
  $('#slideshow').cycle({
    /* ... */
  });
});

なぜこれが機能するのですか？window.onloadページで参照されているすべての画像が読み込まれた後に起動するため( https://developer.mozilla.org/en/DOM/window.onloadおよび.load() - jQuery APIを参照)、これは状況で望ましい動作です。$(document).ready「DOM Ready」としてよく知られている は、画像が読み込まれる前に起動します。これは通常、望ましい動作ですが、あなたの状況では時期尚早です。

于 2012-02-09T20:15:10.773 に答える
4

数か月前にサイトで作業したときに同じ問題が発生しました（以下にリンクされています）。でサイクルを開始し$(document).ready()ている場合、クライアントがページを参照すると次のようになります。

img1) クライアントのブラウザが各要素のリクエストを送信します。これらの要求が満たされるまでにかかる時間はさまざまです。

2) イメージ要求が完了する前に、サイクルが開始されます。Cycle は、スライド ショーの最初の画像以外をすべて非表示にすることで機能します。各画像にvisibility:hiddenとdisplay:noneを設定します。

問題は、表示スタイルが none に設定された時点で、img Firefox が要素のサイズを完全に修正することです。そのため、画像の読み込みが完了していない場合、高さと幅のスタイル属性は小さくなります (正確には、それらが何に対応しているかはわかりません - おそらく Firefox の画像プレースホルダーのサイズ)。style 属性を に設定して cycle が画像を表示する場合、画像が非表示になったときの寸法が使用されます。display:block

すべての画像の読み込みが完了するまでサイクルプラグインを開始しないようにコードを変更することで、これを解決しました。これを行うには、循環している画像の数にカウンター変数を初期化し、次のように各画像に読み込みイベントをバインドします。

var imagesRemaining = 12; // 12 is just the number of images in the slideshow div

$(document).ready(function() {
    $('#slideshow > img').bind('load', function(e) {
        imagesRemaining = imagesRemaining - 1;
        if (imagesRemaining == 0) {
            // I'm doing some other stuff when initializing cycle
            startCycle();
            // My images all start with visibility:hidden so they don't show
            // before cycle hides them in a 'stack', so ...
            $('#slideshow > img').css('visibility', 'visible');
        }
    });
});

function onBefore(curr, next, opts) { // Your code here ... }

function startCycle() {
    $('#slideshow').cycle({ ... // your initialization here });
}

このサイトのギャラリーをFirefox で表示すると、その動作を確認できます。ギャラリー ページを動的に作成しているため、ページとは少し異なる構造になっていますが、Firebug をいじってみると詳細を確認できます。

于 2009-11-12T02:28:29.610 に答える
2

また、幅と高さの属性を追加するとこの問題が解決するように見えることも付け加えておきます。

于 2009-12-10T07:11:07.327 に答える
1

おそらくloadを呼び出すためのひどい方法を知っていますが、何らかの理由でサイクルコードを.loadにバインドするだけで、機能しないので、サイクル初期化子全体を...内で呼び出しました。

動的な画像とデータを含むliを循環しているため、サイズを強制できませんでした

それはおそらくある程度欠陥がありますが、私と同じくらい絶望的な人にとっては...

于 2010-12-05T14:46:59.327 に答える
0

ジョシュ、あなたの解決策は私の頭痛の種を救ってくれました、どうもありがとう!

画像の総数がわからないページを扱うために、少し修正したと思います。私にとってはうまく機能しているようです。誰かが欠陥を見ることができる場合は、指摘してください-私はまだ学んでいます.

$(document).ready(function () {
    $('#slideshow > img').each(
        function go() {
            $(this).bind('load', function (e) {
                projects();
                $('#slideshow > img').css('visibility', 'visible');
            });
         });
    });

function projects() {
    $('#slideshow').cycle({
        fx: 'scrollHorz',
        speed: 300,
        timeout: 0,
        next: '#next ',
        prev: '#prev ',
        after: onAfter,
        nowrap: 1,
        autostop: 1 
    });
}
于 2011-07-04T09:26:59.033 に答える
0

データベースを使用してスライドショーを作成している場合は、画像自体から画像のサイズにアクセスしてみてください。

たとえば、djangoを使用して使用できます

 width="{{ xxx.image.width }}px"  height="{{ xxx.image.height }}px"

あなたのimgタグで。

于 2010-02-11T13:24:00.073 に答える
0

YouTube 動画をレスポンシブにするのと同様のソリューションを使用できます。幅と高さの比率を把握し、それを padding-bottom としてサイクリング div に追加する必要があります。1024X680 の写真では、680/1024 = 66.4% を使用しました

あなたの場合、私は信じています

#slideshow{ padding-bottom:66.4%; } 縮小されていない画像が表示されます。作業している実際の高さと幅の値がわからないので、自分のものに置き換えてください。$(window).load ソリューションが非常に効果がないことが判明したときに、このソリューションを使用する必要がありました。そのため、現在は両方を使用しています。

これは、流動的で応答性の高い環境にスライドするため、画像のサイズを設定するよりも優れています。

于 2015-02-18T01:22:10.233 に答える