Chrome nie wykrywa rozmiarów obrazów

Question

Próbuję upewnić się, że obrazy większe niż szerokość ich wyświetlania zostaną otwarte w przeglądarce obrazów. Jednak w rozdzielczości 720p i Google Chrome otrzymuję 0 dla szerokości zarówno dla oryginału, jak i szerokości rzutni ...

Oto przykładowa strona, na której obraz powinien być otwierany w widoku BFX (spróbuj w Chrome na stronie niższa rozdzielczość): Live Example

Log (pierwszy obraz skanowany jest obraz w pytaniu)

Starting BFX View Version 0.3 Build 61 alpha 
bfxcore.js:92 BFX View -> Looking for images in: .postpreview... 
bfxcore.js:92 BFX View -> Looking for images in: .content... 
bfxcore.js:109 Image: http://media-cache-ec0.pinimg.com/originals/ed/e1/c7/ede1c78fe16fba4afd1606772a5fc1ac.jpg Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/smilies/wink.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/smilies/smile.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/primus/blue/misc/quote_icon.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/primus/blue/buttons/viewpost-right.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/smilies/wink.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/smilies/smile.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/primus/blue/misc/quote_icon.png Original Width: 0 Against: 0 
bfxcore.js:109 Image: images/primus/blue/buttons/viewpost-right.png Original Width: 0 Against: 0 

JavaScript

$(function(){ 

    /**************************************************** 
    / BFX View version 0.3 build 56 
    / by WASasquatch for BeeskneesFX.com 
    /***************************************************/ 

    // Global vars 
    var appname = 'BFX View', 
     appflag = 'alpha', 
     appversion = 0.3, 
     appbuild = 61, 
    // Selectors 
     findImagesIn = new Array(
        '.postpreview', 
        '.content', 
        '.restore', 
        '.postbody' 
        ), // Master container class/id - all image tags in children elements get selected 
    // Theater selectors 
     theater = $('#theater-box'), 
     theaterimg = theater.find('#theater-img'), 
     theaterclose = theater.find('#theater-header span');   

    console.log('Starting '+appname+' Version '+appversion+' Build '+appbuild+' '+appflag); 
    if (notMobile === false) { 
     console.log(appname+' detected a mobile device. Disabling BFX View for performance. Visit us on a desktop!'); 
    } else { 
     // Start a BFX View selector 
     for (i=0; i<findImagesIn.length; i++) { 
      console.log(appname+' -> Looking for images in: '+findImagesIn[i]+'...'); 
      $(findImagesIn[i]).each(function(){ 
       bfxView('.'+$(this).attr('class')); 
      }); 
     } 
    } 

    function bfxView(id) { 
     var imgCount = 0; 
     $(id).each(function(){ 
      $(this).find('img').each(function() { 
       var img = $(this), 
        width, height, origWidth = $(this).width(); 
        hiddenImg = img.clone().attr('class','').attr('id','').css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('#loading-images'); 
       height = hiddenImg.height(); 
       width = hiddenImg.width(); 
       hiddenImg.remove(); 
       console.log('Image: '+$(this).attr('src')+' Original Width: '+origWidth+' Against: '+width); 
       if (width > origWidth) { 
        imgCount++; 
        $(this).css('cursor', 'pointer'); 
        var parent = $(this).parent(); 
        if (parent.attr('href') == $(this).attr('src')) { 
         parent.attr('target','_self'); 
         parent.removeAttr('href'); 
        } 
        $(this).click(function() { 
         var startingPoint = $(document).scrollTop(), 
          theaterActive = true, 
          bodyo = $('body').css('overflow'); 
          $('body').css('overflow', 'hidden'); 
         theaterimg.html('<img src="' + $(this).attr('src') + '" alt="Medium View" />'); 
         setTimeout(function(){ 
          theaterimg.find('img').each(function(){ 
           var renderWidth = $(this).width(); 
           if (renderWidth < width) { 
            $(this).css('cursor', 'pointer'); 
            theater.find('#viewfull').attr('href', '/viewer.html?src='+Base64.encode($(this).attr('src'))+'&t='+Base64.encode(window.location.href)); 
            theater.on('click', '#theater-img img', function(){ 
             window.location.href = '/viewer.html?src='+Base64.encode($(this).attr('src'))+'&t='+Base64.encode(window.location.href); 
            }); 
           } else { 
            theater.find('#viewfull').remove(); 
            $(this).attr('alt','Full Resolution View'); 
           } 
          }); 
         },0); 
         theater.fadeIn(1000, function() { 
          theaterclose.click(function() { 
           theater.fadeOut(1000, function() { 
            theaterActive = false; 
           }); 
           $('body').css('overflow', bodyo); 
          }); 
         }); 

        }); 

       } 

      }); 

     }); 

     console.log(appname+' -> '+imgCount+' images found in '+id); 

    } 


}); 

Zmieniłem kod dla wyszukiwań, które mają na celu sprawdzenie, czy wszystkie możliwe klasy zostały sprawdzone. Stary kod do rozpoczęcia poszukiwania był

 for (i=0; i<findImagesIn.length; i++) { 
      console.log(appname+' -> Looking for images in: '+findImagesIn[i]+'...'); 
      bfxView(findImagesIn[i]); 
     } 

zaktualizowanego kodu Nadal nie idą na Chrome i złamany na Firefox z tej edycji. To powie mi, że "Szerokość" i "wysokość" nie są zdefiniowane, tak jak żaden obraz nie jest załadowany.

  $(this).find('img').each(function() { 
       $(this).load(function(){ 
        var img = $(this), 
         width, height, origWidth = $(this).outerWidth(); 
         hiddenImg = img.clone().attr('class','').attr('id','').css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('#loading-images'); 
        height = hiddenImg.height(); 
        width = hiddenImg.width(); 
        hiddenImg.remove(); 
       }); 

Answer 1

Twój przykład nie działa:

BFX View -> 0 images found in ... 

Zresztą staramy się odczytać szerokość zanim obraz zostanie załadowany. Spojrzeć na odpowiedź na to pytanie, które w rzeczywistości obejmuje ten sam temat:

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

dla dużych obrazów, polecam użyć skryptu po stronie serwera, który odczytuje wymiary obrazu, dzięki czemu klient nie musi czekać, aż ładowanie wszystkich obrazów uruchomi skrypt.

Answer 2

musisz dodać detektor zdarzeń do wszystkich obrazów i uzyskać ich ograniczenia po ich załadowaniu >> dla przykładu.

img.onload = function() { 
    // get width and height of the img refering to it using "this" keyword 
} 

a jeśli używasz JQuery

$(imgSelector).load(function(){ 
    // get width and height of the img refering to it using "$(this)" 
}):