1. 程式人生 > 實用技巧 >關於圖片載入後遍歷 和 ajax遍歷

關於圖片載入後遍歷 和 ajax遍歷

需求: 根據圖片的豎圖、橫圖(比較長寬),用不同的樣式。橫圖:width:100%; 豎圖:height: 100%。需要相容ie8

解決方案:

1.用js判定橫圖豎圖,然後新增對應的css。

中途遇到一個載入判定的問題,如何判定圖片已載入後去判斷圖片是橫豎圖?

//證書封面樣式判定後修改
window.onload = function(){
        $('.J-certCover-img').each(function () {
            var w = $(this).width();
            var h = $(this).height();
            
if(h > w){ $(this).css('width','auto'); $(this).css('height','100%'); $(this).css('margin','0 auto'); } }) }

在ajax中:

//證書封面樣式判定後修改
        $('.J-certCover-img').on('load',function(){
            var w = $(this).width();
            
var h = $(this).height(); if(h > w){ $(this).css('width','auto'); $(this).css('height','100%'); $(this).css('margin','0 auto'); } })