javascript - Chrome 无法检测图像尺寸

Question

我试图确保在我的图像查看器中打开大于其查看宽度的图像。但是，在 720p 分辨率和 Google Chrome 浏览器中，原始宽度和视口(viewport)宽度的宽度均为 0...

这是一个示例页面，其中应在 BFX View 中打开图像(尝试在较低分辨率的 Chrome 中):Live Example

日志(扫描的第一张图像是有问题的图像)

 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);

    }


});

我更改了搜索代码，以确保检查所有可能的类。开始搜索的旧代码是

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

更新的代码 Chrome 上仍然无法运行，并且在 Firefox 上通过此编辑失败。这会告诉我“宽度”和“高度”未定义，就像没有加载图像一样。

            $(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

您的示例不起作用:

BFX View -> 0 images found in ...

无论如何，您正在尝试在加载图像之前读取宽度。看看实际上涵盖同一主题的这个问题的答案:

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

对于大图像，我建议使用读取图像尺寸的服务器端脚本，这样客户端就不必等待加载所有图像来触发您的脚本。