javascript - ejemplos - Fadein() efecto a una función: ¿cómo?

jquery 3.3.1 fadein

Question

Tengo esta función que funciona bien para la carga perezosa.

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

¿Cómo puedo dar un efecto fadeIn() a la función removeAttr?
Lo intenté:

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

pero no funciona El código img tiene este aspecto y simplemente quiero que el punto.png se desvanezca y el original.jpg se desvanezca.

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

http://jsfiddle.net/7s1yb1un/6/
Gracias por adelantado

Answer 1

El siguiente código clonaría las imágenes que tienen el atributo data-src , luego ocultará la clonación, actualizará la clonación src , la ubicará sobre la imagen original y se desvanecerá. ¿Funcionaría para usted?

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 2

El siguiente código se desvanecerá, cambiará la fuente y luego se desvanecerá.

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

Answer 3

Esto es lo que he hecho.

Agregado un fadeOut(5000) , el img con src original se desvanecerá después de 5 sec . Llamó a una función con un tiempo de espera de 6 6sec , que cambia el src con data-src y fadeIn(5000) en 5 segundos, espero que esto resuelva su problema.

El código JS está debajo

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 4

Gracias chicos. Encontré este script funcionando (de alguna manera), las imágenes simplemente parpadean a veces. No sé si semánticamente correcto.

$(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 5

No puedes desvanecer un cambio de fuente en un elemento img . Para lograr esto necesitarás dos elementos img . El segundo tendrá un src "original.jpg" y tendrá un z-index más alto y comenzará con la display: none para un estilo. Luego puedes fundirlo y se desvanecerá sobre el punto.

EDITAR Dada tu nueva pregunta, podrías hacer lo siguiente:

1. Añadir un oyente onload para la imagen
2. Justo antes de cambiar el "src", desvanece la imagen
3. Luego cambia el "src" a "original.jpg"
4. En su función onload , haga un fadeIn