jquery - 使用 jquery 更改 src 属性会使容器变小 1 秒...为什么？

Question

我正在尝试为移动网站创建一个小幻灯片。

这是 html:

<div id="gallery">
    <a id="prev" data-icon="arrow-l" data-iconpos="left" data-role="button" href="#">Previous Image</a>
<div class="gallery-pic">
    <img class="slider" src="images/gallery/chateau-slider-1.jpg" />
</div>
<a id="next" data-icon="arrow-r" data-iconpos="right" data-role="button" href="#">Next Image</a>
</div>

这是 jquery 代码:

$(document).ready( function() {

        var height = $('.slider').height();
        $('.gallery-pic, .slider').css('min-height',height);

        $('#prev').click(function(prev) {
            prev.preventDefault();
            var nameImg = $('img.slider').attr('src').split('/');
            var fileName = nameImg[2].split('-');
            var exp = fileName[2].split('.');
            var numImg = parseInt(exp[0]);
            if(numImg == 1) {
                numPrevImg = 18; }
            else {
            var numPrevImg = numImg - 1; }
            $('img.slider').fadeOut(500, function() {
                $('img.slider').attr('src','images/gallery/chateau-slider-' + numPrevImg + '.jpg');
                $('img.slider').fadeIn("slow");
            });
        });


        $('#next').click(function(next) {
            next.preventDefault();
            var nameImg = $('img.slider').attr('src').split('/');
            var fileName = nameImg[2].split('-');
            var exp = fileName[2].split('.');
            var numImg = parseInt(exp[0]);
            if(numImg == 18) {
                numNextImg = 1; }
            else {
            var numNextImg = numImg + 1; }
            $('img.slider').fadeOut(500, function() {
                $('img.slider').attr('src','images/gallery/chateau-slider-' + numNextImg + '.jpg');
                $('img.slider').fadeIn("slow");
            });
        });
    });

基本上，它会搜索下一张图片并更改 src 属性。

对于 1/2 秒，容器 (.gallery-pic) 会变小，即使我设置了 min-height 属性。请注意，我在使用 iPhone 版 Safari 时遇到了这个问题。在浏览器中一切正常。

请帮帮我，我要疯了。

谢谢

Answer 1

基本上，您为容器设置了不同的大小。确保你的容器有固定的高度和宽度，并且它不会扩展以适应它的 child 。当您更改 src 时，一瞬间内部没有图像，因此无法扩展它以适应某些尺寸。

在 CSS 中更改它，一切都应该没问题。

我正在通过 iPhone 模拟器查看您的网站。

您正在从 HTML 标记或 javascript 中将最小高度设置为 0，这将覆盖您的最小高度:160px；从 ​​CSS 设置!!!!

此外，如果您将最小高度设置为 160 像素，并且您的图片高度大于 160 像素，您肯定也会看到这种效果。在图像进入扩展之前，容器会变得稍微小一些。