獲取圖像的方向JS

我實際上試圖讓JS中圖像的方向向它添加一個類。它似乎在Firefox上運行良好，但我在其他瀏覽器上遇到問題。它對於非常小的圖像效果更好，所以如果圖像沒有完全加載，我想這不起作用......但是我找不到解決方案使其正常工作！謝謝！獲取圖像的方向JS

我的代碼：

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

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

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

來源

2017-06-21 Julien

基本上，你需要做的事情，你是否像第一次加載，如果沒有，添加事件偵聽器來觸發它。

你可以知道圖像是否被加載，因爲它是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); 
      }); 
     } 
    }) 
});

來源

2017-06-21 14:30:59 samanime

'（this.width> this.height）'代替'（this.width/this.height> 1）'將擺脫潛在DivideByZero問題和少的性能開銷。另外，我相信你必須編寫'$ this.width（）'和'$ this.height（）'來實現這個功能。 – phil

謝謝Samanime！聽起來像一個好主意，但是當我這樣做時，根本沒有課...... – Julien

確實，改變數學可以修正除數爲零，但它仍然不會給他一個正確的風景或肖像的答案，如果它們沒有加載，它會默認爲一個。既然我們知道它在檢查之前就已經加載了，那麼它的完成方式並不重要。另外，我做了，它應該是'img.width'和'img.height'，我錯了。 'Image'元素直接具有寬度和高度，不需要在jQuery中包裝。 – samanime

我終於找到...應該使用naturalWidth和naturalHeight得到PIC的原始值。如果有人感興趣，這裏是我的代碼適用於每個瀏覽器。謝謝Samanime！

function setImageClass(img) { 
 
\t var imgClass = (img.naturalWidth/img.naturalHeight > 1) ? 'landscape' : 'portrait'; 
 
\t $(img).addClass(imgClass); 
 
} 
 

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

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

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

來源

2017-06-22 07:54:14 Julien

獲取圖像的方向JS

回答

相關問題