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>

tamImagem将元素宽度计算为 0时会出现问题img。然后它将错误的值传递给leftOffsetvalue 并破坏表达式。有时，经过几次刷新后，它就可以工作了。有时它不会。问题是什么？它返回 0 是否是因为元素尚未准备好？但是为什么不准备好呢？

此外，我不太了解后台运行的某种 Ajax 请求。请求完成后，页面上的每个图像都会收到一个complete类。我应该等到img元素是complete吗？我怎么做？

非常感谢！

4

1 回答 1

3

如果没有在 html 中明确给出图像的宽度（如width="xx"），则通常在文档完全加载之前不可用，即$(window).load().

在.ready()所有标签都被读取和解析的时候，任何与元素维度有关的属性都可以被读取。如果此时尚未设置这些属性，则在从其源加载相应对象后，它们将变为可用。

如果您想在加载特定图像时直接收到通知（而不是等待.load()），您可以附加一个.onload()到它；但不能保证，因为那时图像加载已经开始，在某些情况下，你可能来不及捕捉它:)

于 2012-05-29T14:47:46.600 回答