jQuery / JS 等待图片宽度调整

Question

我在页面加载功能期间遇到时间问题。我需要获取图像宽度后的问题

(1) 已加载

(2) 100% 宽度由 CSS

调整

图像宽度设置为 100% 并在我的 AJAX POST 返回后调整约 300 毫秒，但我不想在加载时间使用超时可能会有所不同。

    parsed_return.forEach(function(entry) {
        entry.pages.forEach(function(page) {
            $('<div style="margin-bottom: 50px;">' + 
                '<div class="col-xs-1"></div>' + 
                '<div class="col-xs-10 page" id="' + page.id + '" style="padding: 0px;">' + 
                    '<img class="image" src="' + base_url + page.page_uri + '&dpi=150">' +
                '</div>' + 
                '<div class="col-xs-1"></div>' + 
            '</div>').data( 'page_id', page.id ).addClass( 'row' ).appendTo( '#page-view' );
            page_list.push(page.id);

            console.log($("#" + page.id + " img").width()); // Outputs 1279px (Natural)
        });
    });

    setTimeout(function(){
        console.log($("#page-view .page img").first().width()); // Outputs 1279px (Natural)
    },100);

    setTimeout(function(){
        console.log($("#page-view .page img").first().width()); // Outputs 1267px (adjusted to 100% based on window size)
    },300);

我需要在图像调整为父元素的 100%（基于 window 大小）之后获取图像的宽度，而不是运行下一个 AJAX POST 直到那时。无论如何，我可以正确地做到这一点吗？

谢谢观看！

Answer 1

if($("#page-view .page img").first().width() == $("#page-view .page img").first().parent().width())

您可以制作一个函数，当图像与父级宽度匹配时使用上述逻辑进行检查

Answer 2

我真的推荐你使用 jquery.waitForImage 它会为你完成所有加载图像，加载后你可以随心所欲地播放它们。

Answer 3

这里有一个代码示例，您可以将其包含在 css 文件中，以便在执行媒体查询之前调整图像：

body::before { opacity:0.3; background: url(/images/DNA.jpg) no-repeat center center fixed; content: ''; z-index: -1; width: 100%; height: 100%; position:absolute; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }

jQuery / JS 等待图片宽度调整

jQuery / JS wait until image width adjusted

javascript

ajax

jquery

load

image