JS控制DOM，有时候要刷新一下才起作用

Question

我用来修改样式的JS放在页面加载完执行，有的时候一部分产品样式没修改过来，要刷新一下才起作用，请问是什么原因，如何解决？

本地测试好像没问题，有没有可能是网络的问题，因为这个服务器是国外的。

$(function(){
    setTimeout(style,100);
    function style(){
        $('#speaker_article .item .photo').each(function(){
            var height=$(this).css('height');
            var marginTop=(240-parseInt(height))/2-10+'px';
            $(this).css('marginTop',marginTop);
            // console.log('高:'+height);
            // console.log('间距:'+marginTop);
        })
    }
})

Answer 1

如果说是部分商品已经修改了样式，部分商品未修改，那肯定不是网络原因
我看你这图片上有异步或者分页的部分(代码没看见),那可能是因为你贴出来的代码($function(){})只是修改了首屏已经出现的photo样式，但是对于异步来的内容是每改的
如果是这样的原因，建议在异步成功的success里对新增的photo重新执行一遍这个函数

Answer 2

不上代码 靠我们猜吗？

Answer 3

自问自答一下：我通过打印图片的height和margin-top发现有些图片获取到的高度为0，有些是正常的。而在本地测试基本没这个问题。所以出现这个问题的原因是部分图片还没加载完就去获取它的高度了，所以用JS控制图片的样式就必须等图片加载完成再去执行。一般控制样式css就可以了，我这边因为要图片水平垂直居中，还要不变形，上传上来的图片大小不固定，纯css的方法我想不出来，所以用了js。