Заставить изображения при загрузке изображения использовать jquery

Question

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

У кого-нибудь есть предложения, как это улучшить.

Спасибо

$('.contentwrap img').hide().load(function () {
    $(this).fadeIn(1000);
});

Answer 1

иногда не все изображение исчезает.

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

Если изображения находятся в HTML, единственным надежным способом, к сожалению, является включение (крайне некрасивого) встроенного атрибута загрузки:

<img src="..." alt="..." onload="$(this).fadeIn();">

Answer 2

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

$(document).ready(function() { 

    $('img').hide();
    $('img').each(function(i) {
        if (this.complete) {
            $(this).fadeIn();
        } else {
            $(this).load(function() {
                $(this).fadeIn();
            });
        }
    });
});

Answer 3

Разместите этот бит кода в разделе сайта:

<script>
         $('body').ready(function() { 

        $('img').hide();
        $('img').each(function(i) {
            if (this.complete) {
                $(this).fadeIn();
            } else {
                $(this).load(function() {
                    $(this).fadeIn(2000);
                });
            }
        });
    });
 </script>

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

Answer 4

Я только что ответил на это в этой теме: jQuery Как вы получаете изображение, чтобы исчезнуть при загрузке?

У меня работает!

Answer 5

Сначала вы можете убедиться, что ваши изображения по умолчанию скрыты (что устраняет необходимость в вызовах jQuery hide) с помощью некоторого CSS,

.contentwrap img {
    display:none;
}

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

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

// fade in images already loaded:
$('.contentwrap img').fadeIn(1000);
// and tell pending images to do the same, once they've finished loading:
$('.contentwrap img').load(function () {
    $(this).fadeIn(1000);
});

Поскольку jQuery будет «складывать» ваши анимационные эффекты, когда что-то полностью исчезнет, ​​вы можете снова вызвать fadeIn, и ничего не должно (заметно) произойти.

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

Удачи!

Answer 6

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

Answer 7

Я использую крутой скрипт Дэвида ДеСандро, чтобы проверить, загружены ли изображения. (Например, вы можете написать функцию, которая добавляет класс к загруженным изображениям, поэтому они будут плавно переходить с помощью CSS-перехода. Проверьте это:
http://desandro.github.io/imagesloaded/

Answer 8

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

Другим решением было бы скрыть ваши изображения в css и использовать следующий javascript:

$(window).load(function(){
  $('.contentwrap img').not(':visible').fadeIn(1000);
});

function showImages() {
  $('.contentwrap img').load(function () {
        $(this).fadeIn(1000);
  });
});

showImages();

Таким образом, большинство изображений загружаются правильно, и если они были кэшированы и сразу скрыты (функция загрузки не успевает быть запущена), событие загрузки страницы заставит их появиться. Событие загрузки страницы гарантирует, что все было загружено.

Answer 9

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

$('body').ready(function() {
    //your code here
});

Answer 10

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

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