Question

我实际上尝试在JS中获取图像的方向以向其添加类。它似乎在Firefox上工作正常，但我在其他浏览器上有问题。对于非常小的图像，它可以更好地工作，所以如果图像没有完全加载，我猜它不起作用......但我找不到使其正常工作的解决方案！谢谢！

我的代码：

＆＃13;

$(document).ready(function() {
	$('.gallery a').find('img').each(function() {
		var imgClass = (this.width / this.height > 1) ? 'landscape' : 'portrait';
		$(this).addClass(imgClass);
	})
});

＆＃13;

.gallery {
	display: flex;
	flex-wrap: wrap;
	width: 450px;
}
.gallery a {
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.gallery a img.landscape {
	align-self: center;
	height: 100%;
	filter: sepia(100%);
}
.gallery a img.portrait {
	align-self: center;
	width: 100%;
	filter: grayscale(100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
	<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
		<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
	</a>
	<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
		<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
	</a>
	<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
		<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
	</a>
	<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
		<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
	</a>
</div>

＆＃13;

Answer 1

基本上，您需要做一些事情，检查图像是否先加载，如果没有，则添加一个事件监听器来触发它。

您可以判断图像是否已加载，因为它是width且height将大于0.如果它们等于0，则表示未加载。它可以在FF中工作，因为它正在缓存图像，因此它们会立即加载。

这样的事情可以解决问题：

function setImageClass(img) {
    var imgClass = (img.width / img.height > 1) ? 'landscape' : 'portrait';
    $(img).addClass(imgClass);
}

$(document).ready(function() {
    $('.gallery a').find('img').each(function() {
        if (this.width > 0) {
            setImageClass(this);
        } else {
          $(this).once('load', function () {
            setImageClass(this);
          });
        }
    })
});

Answer 2

我终于找到了！...应该使用naturalWidth和naturalHeight来获取pic的原始值。如果有人感兴趣，这是我的代码适用于每个浏览器。谢谢Samanime！

function setImageClass(img) {
	var imgClass = (img.naturalWidth / img.naturalHeight > 1) ? 'landscape' : 'portrait';
	$(img).addClass(imgClass);
}

$(document).ready(function() {
	$('.gallery a').find('img').each(function() {
		if (this.naturalWidth > 0) {
			setImageClass(this);
		} else {
		  $(this).once('load', function () {
			setImageClass(this);
		  });
		};
	})
});

.gallery {
	display: flex;
	flex-wrap: wrap;
	width: 450px;
}
.gallery a {
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.gallery a img.landscape {
	align-self: center;
	height: 100%;
	filter: sepia(100%);
}
.gallery a img.portrait {
	align-self: center;
	width: 100%;
	filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="gallery">
	<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
		<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
	</a>
	<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
		<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
	</a>
	<a href="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
		<img src="http://lorempixel.com/output/city-q-c-1500-1000-3.jpg">
	</a>
	<a href="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
		<img src="http://lorempixel.com/output/city-h-c-1000-1500-4.jpg">
	</a>
</div>

获取图像的方向JS

2 个答案: