jQuery изменение размера изображения пошло не так! - PullRequest
Новая
       14

jQuery изменение размера изображения пошло не так!

0 голосов
/ 06 августа 2010

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

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

Во всяком случае, мне действительно нравилось предложение Пэта изменить размеры изображений с помощью фрагмента jQuery, потому что яЯ могу легко применить его ко всем моим изображениям, имеющим класс fancybox, другими словами, к изображениям моего продукта, которые при нажатии отображают эффект fancybox.

Однако по некоторым причинам он ведет себя какof screwy.

Если вы укажете свой браузер, чтобы увидеть проблему на моей странице, на http://www.marioplanet.com/product.htm вы можете увидеть проблему.

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

Проблема, по-видимому, различна для разных браузеров:

Firefox (3.6.8) и IE (8): под полужирным текстом: «Category Plush», где изображения должны быть должным образом изменены.они очень малы.

Chrome (5.0.375.125) и Safari (5): под тем же жирным текстом, где должны быть изображения , есть только два выделенных квадрата и ничегоelse.

«Исправления», которые я обнаружил, если не обновлять код, выглядят так:

Firefox (3.6.8) и IE (8): простое обновление иизображения возвращаются к тому размеру, который я хочу, чтобы они были при первом посещении.

Chrome (5.0.375.125) и Safari (5): указав этим двум браузерам URL-адрес http://www.marioplanet.com/product.htm#, который можетэто легко сделать, добавив символ фунта (#) или щелкнув значок YouTube на панели социальных сетей «Follow Us On», и размер изображений будет таким, каким я бы хотел, чтобы они были при первом посещении.

Итак, я подумал о фрагменте jQuery, чтоВозможно, действие .width () не имеет широкой поддержки, Google не дало никаких результатов, и было бы бессмысленно, если бы оно не работало хорошо в ЛЮБОМ крупном браузере.

Итак, я подумалвозможно, фрагмент jQuery отсутствовал в обработчике событий $ (document) .ready, поэтому DOM и, следовательно, изображения не были загружены должным образом.После изучения моего кода все выглядело хорошо.

Наконец, мне стало интересно, не осталось ли какого-либо размера, оставшегося на моих изображениях, испорченное изменение размера jQuery, и все снова выглядело нормально, но, возможно, оно имеетделать с шириной таблиц, строк и ячеек таблицы?

Любые предложения или идеи о том, в чем заключается проблема, будут высоко оценены !!

Спасибо!

1 Ответ

1 голос
/ 08 августа 2010

Проблема действительно в вашем обработчике $(document).ready, когда он запускает DOM готов, изображения могут не быть, и, вероятно, не будет при первой загрузке.Причина, по которой он работает при перезагрузке, заключается в том, что изображения кэшируются и загружаются мгновенно.

Это легко исправить, хотя вместо $(document).ready используйте событие window.onload, например: 

$(window).load(function() {
  //code that needs images
});

Основное отличие состоит в том, что onload запускает после загрузки изображений, поэтому .width() даст вам правильное значение вместо 0.

...