Bagaimana untuk menyelesaikan masalah bahawa jquery tidak dapat memperoleh saiz imej dalam Google Chrome_jquery

Kodnya adalah seperti berikut:

$(document).ready(function(){
 var img_h=$img.height();
 var img_w=$img.width();
})

Kod di atas tidak mempunyai masalah dalam IE dan Firefox, tetapi ia mungkin menyebabkan masalah dalam Google Punca mengapa saiz kehabisan adalah kerana imej belum dimuatkan.

Kaedah pengubahsuaian adalah seperti berikut:

$(document).ready(function(){
 $img.load(function(){
  var img_h=$img.height();
  var img_w=$img.width();
 })
})

Masih ada masa, jadi saya akan berkongsi dengan anda Cara menukar saiz paparan imej secara dinamik dengan jQuery Butirannya adalah seperti berikut.

Apabila kita ingin memaparkan beberapa gambar dengan saiz berbeza yang dihantar dari latar belakang, untuk memastikan ketekalan saiz gambar dan penyelarasan perkadaran, kita perlu menukar saiz paparan gambar secara dinamik. Melalui carian, kita boleh mencari kod jQuery yang melaksanakan fungsi ini daripada Internet seperti berikut. Kod ini boleh mengekalkan saiz imej dalam julat tertentu Jika saiz asal imej lebih besar daripada nilai maks*, lebar imej yang dipaparkan akan sama.

Kod asal:

$(document).ready(function() {
   $('.post img').each(function() {
   var maxWidth = 100; // 图片最大宽度
   var maxHeight = 100;  // 图片最大高度
   var ratio = 0; // 缩放比例
   var width = $(this).width();  // 图片实际宽度
   var height = $(this).height(); // 图片实际高度
   // 检查图片是否超宽
   if(width > maxWidth){
     ratio = maxWidth / width;  // 计算缩放比例
     $(this).css("width", maxWidth); // 设定实际显示宽度
     height = height * ratio;  // 计算等比例缩放后的高度
     $(this).css("height", height); // 设定等比例缩放后的高度
   }
   // 检查图片是否超高
   if(height > maxHeight){
     ratio = maxHeight / height; // 计算缩放比例
     $(this).css("height", maxHeight);  // 设定实际显示高度
     width = width * ratio;  // 计算等比例缩放后的高度
     $(this).css("width", width * ratio);  // 设定等比例缩放后的高度
   }
 });
 });

Saya juga menggunakan kaedah penulisan ini dalam kod js saya. Walau bagaimanapun, apabila menguji kesan pada penyemak imbas yang berbeza, didapati kaedah penulisan ini tidak boleh disesuaikan dengan penyemak imbas Chrome (nombor versi chrome ialah 10.0.648.204), dan akan menyebabkan pepijat di mana imej dipaparkan dalam saiz asalnya. Kemudian, kod $('.post img').each() telah dibalut dengan kaedah $(window).load() , yang menyelesaikan masalah paparan yang salah dalam penyemak imbas Chrome. Jadi mengapa pepijat berlaku dalam penyemak imbas Chrome, dan apakah perbezaan antara $(document).ready dan $(window).load?

Ternyata acara sedia dokumen mula dilaksanakan apabila dokumen HTML dimuatkan dan DOM sedia, walaupun sumber imej belum dimuatkan lagi. Acara pemuatan tetingkap dilaksanakan sedikit kemudian Ia memulakan pelaksanaan selepas keseluruhan halaman, termasuk bingkai, objek dan imej, dimuatkan. Daripada perbezaan ini, kita boleh menganalisis bahawa apabila penyemak imbas Chrome tidak menggunakan kaedah $(window).load() untuk memproses imej, susunan pelaksanaan kod js untuk memuatkan imej dan menukar imej secara dinamik adalah tidak pasti.

------------------------------------------------ ------

Di atas adalah keseluruhan kandungan artikel berkenaan dengan kod di atas, apabila ia diletakkan pada halaman saya untuk mendapatkan ketinggian imej, ralat akan dilaporkan, menunjukkan bahawa kaedah lebar tidak disediakan

var width = $(this).width();  // 图片实际宽度
var height = $(this).height(); // 图片实际高度

Jadi kod yang diubah suai adalah seperti berikut:

jQuery(window).load(function () {
      jQuery("div.product_info img").each(function () {
        DrawImage(this, 680, 1000);
      });
    });
    function DrawImage(ImgD, FitWidth, FitHeight) {
      var image = new Image();
      image.src = ImgD.src;
      if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
          if (image.width > FitWidth) {
            ImgD.width = FitWidth;
            ImgD.height = (image.height * FitWidth) / image.width;
          } else {
            ImgD.width = image.width;
            ImgD.height = image.height;
          }
        } else {
          if (image.height > FitHeight) {
            ImgD.height = FitHeight;
            ImgD.width = (image.width * FitHeight) / image.height;
          } else {
            ImgD.width = image.width;
            ImgD.height = image.height;
          }
        }
      }
    }

Kandungan di atas adalah apa yang saya kongsikan dengan anda bagaimana untuk menyelesaikan masalah yang jquery tidak dapat memperoleh saiz imej di bawah Google Chrome dan bagaimana jQuery menukar saiz paparan imej secara dinamik, saya harap anda akan menyukainya, dan saya juga berharap rakan-rakan akan terus memberi perhatian kepada laman web ini.