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