Fadein() эффект функции: как?

Question

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

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/
Заранее спасибо

Answer 1

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

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

1. Добавить onload перехватчик для изображения
2. Просто перед заменой «SRC», замирания изображения из
3. Тогда изменить «src» на «original.jpg»
4. В вашей функции onload, сделать fadeIn

Answer 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(); 
}); 

Answer 3

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

$(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); 
}) 
}); 

Answer 4

Следующий код будет клонировать изображения, которые имеют атрибут 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(); 
    }); 
    }) 
}); 

Answer 5

Следующий код будет исчезать, менять СРК, а затем исчезают в.

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(); 
    }) 
});