Question

我正在使用一个很棒的插件computedstyle.js来获取计算出的对象样式。它允许我操纵你通常不能做的事情的css，比如构造的图像。

我可以拍摄链接中的图像源，并更改外壳div和图像本身的大小。通常只有在知道图像大小的情况下才能这样做。

我构建了图像
我调整图片大小
然后我根据更改后的图片大小调整iframe的大小。

这适用于Chrome和Safari，但当然不是Firefox，我认为它正在迅速成为新的Internet Explorer。

问题是，有没有办法可以让firefox等待注意更改，然后调整iframe的大小？

要在Chrome和Safari中正常使用，请转到http://syndex.me。而且不正确，Firefox。

这个问题不是必须的，但如果您想知道我在做什么，我将删除Tumblrs Photoset Post的默认图库预览，并将其替换为单个图像。

if($(this).find('.html_photoset').length){
    $(".html_photoset").find("iframe").load(function(){
        var myFrame=$(this);                        
        $(this).contents().find('.photoset_row:not(:first-child)').each(function(){
            $(this).remove();
        })
    var psPre = $(this).contents().find('.photoset_row').find('a').attr("href");
    $(this).contents().find('.photoset_row').children(':not(:first-child)').remove();
        $(this).contents().find('.photoset_row').children(':first-child').children().remove();
        $(this).contents().find('.photoset_row').find('a').append("<img src='"+psPre+"'alt='Cover Page' />");
        $(this).contents().find('img').load(function(){
            var myCSS = $(this).getCSS(); //this is the plugin function
            var myY = myCSS.height.slice(0, - 2);
            var myX = myCSS.width.slice(0, - 2);
            $(this).closest(".photoset_row").css({height: myY});
            $(this).closest(".photoset_row").css({width: myX});
            $(this).css({maxHeight: (heightRef-0)});
            $(this).css({maxWidth: "auto"});
                    //after I've made the fixes to the image, I redo it for the iframe:
            var myCSS2 = $(this).getCSS();
            var myY2 = myCSS2.height.slice(0, - 2);
            var myX2 = myCSS2.width.slice(0, - 2);
            myFrame.height(myY2);
            myFrame.width(myX2);
            console.log(myY2);
        })                      
})
}

Answer 1

.load() jQuery docs page上的这个警告很有趣：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

它不能一致地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，它在WebKit中无法正确触发

它没有正确地冒泡DOM树

可以停止为已经存在于浏览器缓存中的图像启动

所以，为了尝试减轻其中的一些，我建议尝试将随机查询字符串附加到图像href的末尾以避免被缓存，并避免将src设置为与之前相同，等等。

即。将psPre行更改为：

var psPre = $(this).contents().find('.photoset_row').find('a').attr("href") + '?' + (Math.random() * 1000000);

Firefox的行为与使用jQuery变量值的Safari和Chrome不同

1 个答案: