Проблема с потерей изображения при загрузке - PullRequest
Новая
       22

Проблема с потерей изображения при загрузке

0 голосов
/ 25 ноября 2011

Поскольку все прояснилось в последнее время, я снова начал работать над своим портфелем.Это все еще очень свежо, но я мог бы использовать некоторую помощь с jquery .load () изображений.

http://progress.patrikarvidsson.com/

Я использую jQuery с html5boilerplate;к тому же у меня есть масонство и лайтбокс.Я не подозреваю, что код для оттенков серого является виновником, поэтому я не буду включать его здесь.Ниже находится верхняя часть моего файла scripts.js (после кода greyscale). 

$(window).load(function() {
    $(".thumb img").bind("load", function () { $(this).fadeIn('slow'); });

HTML выглядит так (структура по-прежнему соответствует html5boilerplate. JS-файлы следуют после, но modernizr раньше)1009 * 

<div class="block">
    <a href="titlehighres.jpg" class="thumb" title="title"><img src="img/thumbs/titleSmall.jpg" alt="" /></a>
</div>

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

Page load
Images loads with color
jQuery hides images
jQuery fadeIn desaturated images

Это происходит каждый раз, когда я нажимаю кнопку Обновить.Обратите внимание, что это в Chrome, fadein вообще не работает в Firefox, но я еще не тестировал это на своем другом компьютере.В конце концов, я не могу понять, в чем проблема.

Обновление

Я решил вместо этого использовать css3-анимацию.Это работает довольно хорошо, но мне еще предстоит посмотреть, как это выглядит в старых браузерах.

Хотя мне все еще интересно, почему эта проблема возникает.Так что ответ все еще приветствуется!

Ответы [ 2 ]

1 голос
/ 25 ноября 2011

Попробуйте скрыть цветные изображения в CSS.Они не будут отображаться при загрузке страницы: 

.img_grayscale { display: none; }
0 голосов
/ 25 ноября 2011

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

// document ready
$(function() {

    // reduce opacity
    $('.img_wrapper img').css('opacity',0.01);

    // fade in the grayscale images
    $(".img_grayscale").bind("load", function () { $(this).fadeIn('slow'); });

});

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

...