Fadein() effect to a function: how to?

Question

I have this function that works well for lazy loading.

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

How can I give a fadeIn() effect to that removeAttr function?
I tried:

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

but it doesn't work. The img code looks like this and I simply want the dot.png to fadeOut and the original.jpg to fade in.

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

http://jsfiddle.net/7s1yb1un/6/
Thanks in advance

@NiranjanKumar as I said I want to src to fade out and the data-src to fade in when the img is in view. — Federico, Nov 14 '16 at 15:24
Did you try this solution: http://stackoverflow.com/a/16714137/1009922? — ConnorsFan, Nov 16 '16 at 21:21

Don Rhummy · Answer 1 · 2016-11-14T15:58:10.860

10

You cannot fade a src change on an img element. To acheive this you'll need two img elements. The second one will have a the src "original.jpg" and will have a higher z-index and start with display: none for a style. Then you can fade it in and it will fade in over the dot.

EDIT Given your new question, you could do the following:

Add an onload listener for the image
Just before changing the "src", fade the image out
Then change the "src" to "original.jpg"
In your onload function, do a fadeIn

edited Nov 14 '16 at 15:58

answered Nov 14 '16 at 15:26

Don Rhummy

24,730
42
175
330

1

Is it not possible to play with the opacity 0 to the src and opacity 1 to the data-src? – Federico Nov 14 '16 at 15:29
@Federico Did you try my edited answer? It should do exactly what you want – Don Rhummy Nov 18 '16 at 13:22
I do not know hot to implement it correctly probably :/ – Federico Nov 18 '16 at 18:23

score 5 · Answer 2 · edited Nov 14 '16 at 16:02

Here is what I have done.

Added a fadeOut(5000), the img with original src will fadeout after 5 sec. Called a function with timeout of 6sec, which changes the src with data-src and fadeIn(5000) in 5 sec, I hope this solves your problem.

JS code is below

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

score 2 · Answer 3 · answered Nov 21 '16 at 16:53

The following code would fade out, change the src, then fade in.

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

Federico · Answer 4 · 2016-11-14T17:01:40.203

0

Thanks guys. I found this script working (somehow), the images just blink sometimes. I don't know if semantically correct.

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

edited Nov 14 '16 at 17:01

answered Nov 14 '16 at 16:47

Federico

1,392
1
17
40

Ivan Chaer · Answer 5 · 2016-11-22T11:35:32.910

The following code would clone the images that have the data-src attribute, then hide the clone, update the clone src, position it over the original image, and fade in. Would this work for you?

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

Fadein() effect to a function: how to?

5 Answers5