Эффект Fadein() для функции: как?

У меня есть эта функция, которая хорошо работает для ленивой загрузки.

panel.find('img[data-src]').each(function(){
            element = $(this);
            element.attr('src', element.data('src'));
            element.removeAttr('data-src');

Как я могу дать эффект fadeIn() для этой функции removeAttr?
Я пробовал:

element.removeAttr('data-src').fadeIn();

но это не сработает. Код img выглядит так, и я просто хочу, чтобы dot.png fadeOut и original.jpg исчезли.

<img src="dot.png" data-src="original.jpg">

http://jsfiddle.net/7s1yb1un/6/
Спасибо заранее

Ответы

Ответ 1

Вы не можете вытеснить изменение src на элементе img. Чтобы добиться этого, вам понадобятся два элемента img. Второй будет иметь src "original.jpg" и будет иметь более высокий z-index и начать с display: none для стиля. Затем вы можете угаснуть его, и он будет исчезать над точкой.

EDIT Учитывая ваш новый вопрос, вы можете сделать следующее:

  • Добавить onload прослушиватель для изображения
  • Перед изменением "src", исчезните изображение
  • Затем измените "src" на "original.jpg"
  • В вашей функции onload сделайте fadeIn

Ответ 2

Вот что я сделал.

Добавлен fadeOut(5000), img с оригинальным src будет исчезать после 5 sec. Вызывается функция с таймаутом 6sec, которая меняет src на data-src и fadeIn(5000) через 5 секунд, я надеюсь, что это решит вашу проблему.

Код JS ниже

var myVar;
function myFunction() {
    myVar = setTimeout(function(){ 
        var src = $("img.hide").attr("data-src");
        $("img.hide").attr("src",src);
        $("img.hide").fadeIn(5000); 
    }, 6000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

$(document).ready(function() {
  $(".hide").fadeOut(5000);
  myFunction();  
});

Ответ 3

Следующий код будет исчезать, измените src, затем затухайте.

JSFiddle

HTML

<div id="fullpage">
  <div class="section">
    <img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>

JS

$(function() {
  $('img[data-src]').each(function(i, e) {
    // cache element
    original_img = $(e);
    original_img
    .fadeOut(function(){
      original_img.attr('src', original_img.attr('data-src'))    
    })
    .fadeIn();
  })
});

Ответ 4

Спасибо, ребята. Я нашел этот script рабочий (каким-то образом), изображения иногда мигают. Я не знаю, семантически корректно.

$(function() {
$('img').one("load", function() {
var e = $(this);
e.data('src', e.attr('data-src'));
e.animate({"opacity": 0}, 400);
e.data('src');
e.animate({"opacity": 1}, 400);
})
});

Ответ 5

Следующий код будет клонировать изображения с атрибутом data-src, затем скрыть клон, обновить клон src, поместить его поверх исходного изображения и затухать. Будет ли это работать для вас?

JSFiddle

HTML

<div id="fullpage">
  <div class="section">
    <img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>

JS

$(function() {
  $('img[data-src]').each(function(i, e) {
    // cache element
    original_img = $(e);
    // get position of original image
    offset_left = original_img.offset().left;
    offset_top = original_img.offset().top;
    // get data-src of
    data_src = original_img.attr('data-src');
    // clone original image
    original_img.clone()
    .hide()
    // put it directly in the body, so it can be positioned
    .appendTo('body')
    // set the new src
    .attr('src', data_src)
    // place it over the original image
    .css({
        "left": offset_left,
      "top": offset_top,
      "position": "absolute"
    })
    .fadeIn(function(){
        original_img.attr('src', data_src);
        $(this).remove();
    });
  })
});