फ़ेडेन() फ़ंक्शन पर प्रभाव: कैसे करें?

Question

मेरे पास यह फ़ंक्शन है जो आलसी लोडिंग के लिए अच्छा काम करता है।

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

मैं उस हटाने के लिए fadeIn() प्रभाव कैसे दे सकता हूं?
मैंने कोशिश की:

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

लेकिन यह काम नहीं करता। img कोड इस तरह दिखता है और मैं बस में फीका करने के लिए fadeOut और original.jpg को dot.png चाहते हैं।

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

http://jsfiddle.net/7s1yb1un/6/
अग्रिम धन्यवाद

Answer 1

आप एक पर एक src परिवर्तन फीका नहीं कर सकते img तत्व। इसे स्वीकार करने के लिए आपको दो img तत्वों की आवश्यकता होगी। दूसरे में एक स्रोत "original.jpg" होगा और एक उच्च z-index होगा और शैली के लिए display: none से शुरू होगा। फिर आप इसे फीका कर सकते हैं और यह डॉट पर फीका होगा।

संपादित अपने नए सवाल को देखते हुए, तुम कर सकते हो निम्नलिखित:

1. छवि के लिए एक onload श्रोता जोड़े
2. बस "src", तो छवि बाहर
3. फीका बदलने से पहले "src" से "original.jpg" को बदलें
4. अपने onload फ़ंक्शन में, fadeIn

01 बदलें

Answer 2

यहां मैंने जो किया है वह है।

fadeOut(5000) जोड़ा गया, मूल स्रोत के साथ img 5 sec के बाद fadeout होगा। 6sec के टाइमआउट के साथ एक फ़ंक्शन को कॉल किया गया, जो srcdata-src और fadeIn(5000) के साथ 5 सेकंड में बदलता है, मुझे उम्मीद है कि यह आपकी समस्या हल करेगी।

जे एस कोड

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

एचटीएमएल

<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> 

जे एस

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

निम्नलिखित कोड कम हो गए हैं src बदलने के लिए, तो में नहीं हो पाती।

JSFiddle

एचटीएमएल

<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> 

जे एस

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