Chrome не определяет размеры изображения

Я пытаюсь сделать так, чтобы в моем средстве просмотра изображений были открыты изображения, размер которых превышал их ширину просмотра. Однако в разрешении 720p и в Google Chrome я получаю 0 для ширины как для исходной ширины, так и для ширины области просмотра ...

Вот пример страницы, где изображение должно быть открыто в BFX View (попробуйте в Chrome на более низком разрешении): -Civil-War-poster" rel =" nofollow "> Живой пример

Журнал (первое отсканированное изображение - это рассматриваемое изображение)

 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();
                });
7 голосов | спросил WASasquatch 3 WedEurope/Moscow2014-12-03T00:38:20+03:00Europe/Moscow12bEurope/MoscowWed, 03 Dec 2014 00:38:20 +0300 2014, 00:38:20

2 ответа


0

Ваш пример не работает:

BFX View -> 0 images found in ...

В любом случае, вы пытаетесь прочитать ширину до загрузки изображения. Посмотрите на ответ на этот вопрос, который на самом деле охватывает ту же тему:

Получить реальную ширину и высоту изображение с JavaScript? (в Safari /Chrome)

Для больших изображений я бы порекомендовал использовать серверный скрипт, который считывает размеры изображений, поэтому клиенту не нужно ждать загрузки всех изображений для запуска вашего скрипта.

ответил Gerd K 13 SatEurope/Moscow2014-12-13T12:09:27+03:00Europe/Moscow12bEurope/MoscowSat, 13 Dec 2014 12:09:27 +0300 2014, 12:09:27
0

вам нужно добавить прослушиватель событий для всех изображений и получить их границы после их загрузки>> например.

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

и если вы используете JQuery

$(imgSelector).load(function(){
     // get width and height of the img refering to it using "$(this)"
}):
ответил Romany-Saad 14 SunEurope/Moscow2014-12-14T11:13:12+03:00Europe/Moscow12bEurope/MoscowSun, 14 Dec 2014 11:13:12 +0300 2014, 11:13:12

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132