1

私の問題は、スクリプトが機能しないことがあるということです。私は問題を知っていますが、それを解決することはできません。以下、私のスクリプト。

$(document).ready(function(){
/* Cria UL e popula de LI de acordo com o HTML do controle da Vtex*/
$('.slider-nav').after('<ul class="slider-ul"></ul>');
/* clona elementos se tiver menos que 3 */
var tamArray = $('#slider .box-banner').length;
if (tamArray < 3) {
    for (ij=1; ij<=(3-tamArray); ij++){
        $('#slider .box-banner:last').clone().appendTo('#slider');
    }
}
$('#slider .box-banner').each(function(){
    href = $(this).find('a').attr('href');
    title = $(this).find('a').attr('title');
    src = $(this).find('img').attr('src');
    $('ul.slider-ul').append('<li><a href="'+href+'" title="'+title+'"><img src="'+src+'"/></a></li>');
});
$('.slider-ul').wrap('<div class="slider-ul-wrapper" />');
/* Calcula offset do left pra colocar um banner no meio */
var tamJanela = $(window).width();
var tamImagem = $('#slider .slider-ul:first img').width();
var leftOffset = tamImagem - (tamJanela-tamImagem)/2;
$('.slider-ul').css('left',-leftOffset);
/* Clique em #nav-dir */
$('#nav-dir').click(function(){
    $('.slider-ul li:last').clone().addClass('clone').insertBefore('.slider-ul li:first');
    var soma = -(leftOffset)-tamImagem;
    $('.slider-ul').css('left',soma);
    $('.slider-ul').animate({
        left: '+='+tamImagem+''
        //left: "'+="+tamImagem+"'"
    }, 1000, 'swing', function(){
        $('.slider-ul .clone').remove();
        $('.slider-ul li:last').insertBefore('.slider-ul li:first');
        $('.slider-ul').removeAttr('style');
        $('.slider-ul').css('left',-leftOffset);
    });
});
/* Clique em #nav-esq */
$('#nav-esq').click(function(){
    $('.slider-ul li:first').clone().addClass('clone').insertAfter('.slider-ul li:last');
    //var soma = -tamImagem;
    //$('.slider-ul').css('left',soma);
    $('.slider-ul').animate({
        left: '-='+tamImagem+''
        //left: "'+="+tamImagem+"'"
    }, 1000, 'swing', function(){
        $('.slider-ul .clone').remove();
        $('.slider-ul li:first').insertAfter('.slider-ul li:last');
        $('.slider-ul').removeAttr('style');
        $('.slider-ul').css('left',-leftOffset);
    });
});
});

および関連する HTML:

<div class="slider-ul-wrapper">
    <ul class="slider-ul" style="left: 671.5px">
        <li>
            <a href="undefined" title>
                <img src="...." />
            </a>
        </li>
        .
        .
        .
    </ul>
</div>

が要素の幅を 0 にtamImagem評価すると、問題が発生します。次に、間違った値をvalue に渡し、式を台無しにします。場合によっては、数回更新した後、機能することがあります。そうでない場合もあります。何が問題ですか？要素の準備ができていないため、0 を返しますか? しかし、なぜ準備ができていないのでしょうか？imgleftOffset

また、バックグラウンドで実行されているある種の Ajax リクエストがありますが、これはよくわかりません。completeリクエストが完了すると、ページ上のすべての画像がクラスを受け取ります。img要素がになるまで待つ必要がありcompleteますか? それ、どうやったら出来るの？

どうもありがとう！

4

1 に答える 1

3

画像の幅は、html で ( として) 明示的に指定されていない場合width="xx"、通常、ドキュメントが完全に読み込まれるまで、つまり$(window).load().

.ready()すべてのタグが読み取られて解析された時点で、要素の次元に関連するすべての属性を読み取ることができます。この時点でこれらの属性が設定されていない場合は、それぞれのオブジェクトがそのソースからロードされると使用可能になります。

特定の画像がロードされたときに ( を待つのではなく.load()) 直接通知を受けたい場合は、 を添付できます.onload()。ただし、画像の読み込みはそれまでにすでに開始されており、場合によってはそれをキャッチするには遅すぎるため、保証はありません:)

于 2012-05-29T14:47:46.600 に答える