Question

我制作了一个图像库，其中我有肖像和风景图片。我使用Javascript来确定图片的模式，根据图片方向应用css。这是代码：

     $(document).onload(function() {   
$('.gallery').find('img').each(function(i,elem){
var $this = $(this),
    ratio = $this.width() / $this.height();

$this.addClass((ratio < 1) ? 'portrait' : 'landscape');
});
});

首先访问网站时它不起作用，一旦我刷新页面，它就会完美无缺地工作。在新标签页中打开网站，它再次无效。

PS。试图将document.onload更改为document.ready，没有改变任何内容。

Answer 1

以这种方式监听窗口加载的事件（加载图像后会触发）：

$(window).on('load', function(e) {
    $('.gallery').find('img').each(function(i,elem){
        var $this = $(this),
        ratio = $this.width() / $this.height();
        $this.addClass((ratio < 1) ? 'portrait' : 'landscape');
    });
});

只有在加载图像后，您才能检查它们的比例。

Answer 2

使用：

$(document).ready(init);

function init(){
// Enter your code here
}

Javascript不首先应用，仅通过刷新页面

2 个答案: