JQuery Cycle + Firefox Squishing Images

Question

Эй, ребята, я запускаю цикл jQuery для галереи изображений. Перейдите по ссылке: Here

Моя проблема заключается в том, что изображения сжимаются при просмотре в firefox. Проблема исчезает при повторной загрузке страницы. Это заставляет меня думать, что Javascript запускается до загрузки всех изображений (обычно первое изображение работает нормально, а остальные сжимаются.)

Жесткий повторный просмотр воспроизводит проблему.

Я завернул все в $ (документе) .ready (function() {}); но это все еще происходит.

Дополнительная информация: Если я задам ширину и высоту изображения, все будет хорошо. Однако есть сотни изображений всех размеров.

Я очень расстроен этой проблемой. Любые идеи/помощь приветствуются!

Вот мой код:

$(document).ready(function(){ 
//function onBefore(curr,next,opts) { 
// var $slide = jQuery(next); 
// var w = $slide.outerWidth(); 
// var h = $slide.outerHeight(); 
// $slide.css({ 
//  marginTop: (482 - h)/2, 
//  marginLeft: (560 - w)/2 
// }); 
//}; 

// Decare the function that center the images... 
function onBefore(curr,next,opts) { 
    var $slide = jQuery(next); 
    var w = $slide.outerWidth(); 
    var h = $slide.outerHeight(); 
    $slide.css({ 
     marginTop: (480 - h)/2, 
     marginLeft: (560 - w)/2 
    }); 
}; 


$(document).ready(function() { 
    $('#slideshow').cycle({ 
    fx:  'fade', 
    next: '#next', 
    pause: 0, 
    speed: 500, 
    before: onBefore, 
    prev: '#prev', 
    pause: '#pause', 
    pager: '.thumbs', 
    pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}, 
    pagerAnchorBuilder: function(idx, slide) { 
         var src = $('img',slide).attr('src'); 
         //Change height of thumbnail here 
         return '<li><a href="#"><img src="' + slide.src + '" height="90" /></a></li>'; 

       } 
    });});}); 

Answer 1

У меня была такая же проблема при работе на сайте несколько месяцев назад (связанный ниже). Если вы начинаете цикл в $(document).ready(), вот что происходит, когда клиент просматривает вашу страницу:

1) Браузер клиента отправляет запрос для каждого элемента img. Эти запросы требуют времени, необходимого для выполнения.

2) До того, как запросы изображения будут завершены, начнется цикл. Цикл работает, скрывая все, кроме первого изображения в слайд-шоу: он устанавливает visibility:hidden и display:none на каждое его изображение.

Проблема заключается в том, что Firefox исправляет размер элемента img раз и навсегда в точке, где стиль отображения не установлен. Поэтому, если изображение не закончило загрузку, его атрибуты стиля высоты и ширины небольшие (я не уверен, что именно они соответствуют - возможно, размер заставки образа Firefox). Когда цикл показывает изображение, установив его атрибут стиля на display:block, он использует любые измерения, которые он имел в момент его скрытия.

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

var imagesRemaining = 12; // 12 is just the number of images in the slideshow div 

$(document).ready(function() { 
    $('#slideshow > img').bind('load', function(e) { 
     imagesRemaining = imagesRemaining - 1; 
     if (imagesRemaining == 0) { 
      // I'm doing some other stuff when initializing cycle 
      startCycle(); 
      // My images all start with visibility:hidden so they don't show 
      // before cycle hides them in a 'stack', so ... 
      $('#slideshow > img').css('visibility', 'visible'); 
     } 
    }); 
}); 

function onBefore(curr, next, opts) { // Your code here ... } 

function startCycle() { 
    $('#slideshow').cycle({ ... // your initialization here }); 
} 

Вы можете увидеть его в действии, просматривая галереи на this site в Fire Fox. Я строю страницы галереи динамически, поэтому он структурирован несколько иначе, чем ваша страница, но вы можете увидеть более подробную информацию, если вы соскучитесь с Firebug.

Answer 2

Я также хотел бы добавить, что кажется, что добавление атрибута width и height решает эту проблему.

Answer 3

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

Например, с помощью Джанго вы можете использовать

width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px" 

в вашей IMG метки.

Answer 4

Хорошо я знаю его, вероятно, awfull способ вызова нагрузки, но я просто coulnd связать свой код цикла в .load по какой-то причине он просто не работает, так что я назвал весь цикл инициализатору внутри ...

я не мог заставить размеры, так как я на велосипеде через литий, содержащий динамические изображения и данные

его, вероятно, недостатки в некоторой степени, но для тех, кто, как desperated, как мне ...

Answer 5

Джош, ваше решение имеет только спасли мне головную боль, большое спасибо!

Я думаю, что я немного изменил его, чтобы обрабатывать страницы, на которых вы не знаете общее количество изображений. Кажется, он работает отлично для меня, если кто-то видит какие-то недостатки, пожалуйста, укажите их - я все еще участвую.

$(document).ready(function() { 
    $('#slideshow > img').each(
     function go() { 
      $(this).bind('load', function (e) { 
       projects(); 
       $('#slideshow > img').css('visibility', 'visible'); 
      }); 
     }); 
    }); 

function projects() { 
    $('#slideshow').cycle({ 
     fx: 'scrollHorz', 
     speed: 300, 
     timeout: 0, 
     next: '#next ', 
     prev: '#prev ', 
     after: onAfter, 
     nowrap: 1, 
     autostop: 1 
    }); 
} 

Answer 6

Существует гораздо проще и чище решение, которое я использовал, чтобы решить эту проблему, чем то, что уже было предложено:

с помощью JQuery, вам нужно использовать $(window).load вместо $(document).ready для вашей конкретной ситуации. Чтобы устранить эту проблему, измените это:

$(document).ready(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

к этому:

$(window).load(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

Почему это работает? Поскольку window.onload срабатывает после загрузки всех ссылочных изображений на страницу (см. https://developer.mozilla.org/en/DOM/window.onload и .load() - jQuery API), что является желательным поведением в вашей ситуации. $(document).ready, более известный как «DOM Ready», загорается перед загрузкой изображений. Обычно это желаемое поведение, но в вашей ситуации это слишком рано.

Answer 7

Вы можете использовать решение, похожее на то, чтобы сделать видео youtube отзывчивым. Вам нужно знать отношение вашей ширины к высоте и добавить это как дополнение к дну велосипеда. Для моих 1024x680 фотографий, я использовал 680/1024 = 66,4%

В вашем случае, я считаю,

#slideshow{ padding-bottom:66.4%; } покажет unshrunk изображения. Я не знаю, каковы фактические значения высоты и ширины, с которыми вы работаете, поэтому замените свои собственные. Я должен был использовать это решение, когда решение $ (window) .load оказалось безуспешно неэффективным - теперь я использую оба варианта.

Это лучше, чем установка размеров изображения, поскольку он скользит в жидкую, отзывчивую среду.