Исчезать изображения после загрузки

Question

Я нашел этот код для достижения желаемого эффекта и попробовал его на JSFiddle

http://jsfiddle.net/AndyMP/7F9tY/366/

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

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

$("#image").ready(function(){ $("#preload").fadeIn(1000); });

Answer 1

Единственный надежный способ fadeIn() изображения, которое находится в вашей фактической разметке HTML, - это установить обработчик onload в разметке HTML следующим образом:

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

Рабочая демонстрация здесь: http://jsfiddle.net/jfriend00/X82zY/

Таким образом, вам не нужно присваивать каждому изображению идентификатор или класс.Просто установите стиль и обработчик событий в разметке.

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

Если вы не хотите помещать обработчики событий в javascript,затем вы можете сделать что-то вроде этого, где вы используете заполнитель для изображения в реальном HTML, и вы используете javascript для создания фактических тегов изображения и вставки их и извлекаете URL-адрес изображения из заполнителя:

<div>
    <span class="fadeIn" data-src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

Рабочая демонстрация: http://jsfiddle.net/jfriend00/BNFqM/

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

Answer 2

Может быть интересным для людей, которые находят этот вопрос и используют angular.js:

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

JS:

.directive('imgFadeInOnload', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attr) {
        element.css('opacity', 0);
        element.css('-moz-transition', 'opacity 2s');
        element.css('-webkit-transition', 'opacity 2s');
        element.css('-o-transition', 'opacity 2s');
        element.css('transition', 'opacity 2s');
        element.bind("load", function () {
          element.css('opacity', 1);
        });
        element.attr('src', attr.imgFadeInOnload);
      }
    };
  });

HTML:

<img img-fade-in-onload="{{imgSrc}}" src="">

Путем установки src не в HTML, а в коде директивы проблема, упомянутая jfriend00 (обработчик присоединяется после запуска onload), решается.

Answer 3

Чистый Java-скрипт и решение CSS:

Использование эффекта переходов с opactiy.

let images = document.getElementsByTagName("img");
for (let image of images) {
  image.addEventListener("load", fadeImg);
  image.style.opacity = "0";
}

function fadeImg() {
  this.style.transition = "opacity 2s";
  this.style.opacity = "1";
}

<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">

Answer 4

html

<div id="image">
    <img id="preload" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

javascript

.ready () не запускается так, как вы думаете, см. 'load' jQuery обработчик событий

$("#preload").load(function(evt){
      $(this).fadeIn(1000);
});

Answer 5

fadeIn следует вызывать после загрузки изображения.Вот пример: http://jsfiddle.net/mYYym/

Answer 6

Вот решение css для перехода и javascript, основанное на ответе @ jfriend00 и похожее на подход @Robbendebiene:

• предоставляет запасные варианты для отображения изображения, если js выключено
• требуется только один бит встроенного javascript onload="this.style.opacity=1"
• вся анимация - CSS, нет необходимости в jQuery или сложном javascript

img.fadein {
  opacity: 1;  /* fallback in case of no js */
  transition: opacity 500ms ease;
  max-width: 100%;
  height: auto;
}
.js img.fadein {
  opacity: 0; /* start with hidden image if we have js */
}

<!-- use moderinr to provide the "js" class on the html element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">