javascript - jQuery/JS 等待图像宽度调整

Question

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

(1) 已加载

(2) CSS调整100%宽度

图像宽度设置为 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%(基于窗口大小)后获取图像的宽度，并且在此之前不要运行下一个 AJAX POST。我有办法正确地做到这一点吗？

感谢您的浏览!

Answer 1

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