जब वे ब्राउज़र के दृश्य अनुभाग में प्रवेश करते हैं तो छवियों को लोड करें?

Question

मैं वेब के चारों ओर ब्राउज़ कर रहा था और मैंने कुछ देखा जो मैंने पहले कभी नहीं देखा था। इस साइट पर : http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

जब आप पृष्ठ नीचे नेविगेट, छवियों केवल लोड उनको ब्राउज़र के दृश्य भाग में हैं। मैंने इसे पहले कभी नहीं देखा है और सोच रहा था कि किसी और के पास क्या है और यह वास्तव में कैसे करेगा।

मुझे लगता है कि यह कुछ प्रकार की वर्डप्रेस प्लगइन है (यही वह है जो वह उपयोग कर रहा है) लेकिन मुझे यकीन नहीं है। क्या यह जावास्क्रिप्ट है? क्या वे वास्तव में पेज लोड पर लोड हो रहे हैं लेकिन बाद में "स्नैज़ी" प्रभाव के लिए दृश्यमान हो जाते हैं या क्या यह वास्तव में त्वरित पृष्ठ लोड समय के लिए उपयोगी है?

jQuery(document).ready(function($){ 
    jQuery(".SC img").lazyload({ 
    effect:"fadeIn", 
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" 
    }); 
}); 

मुझे लगता है कि वे किस तरह प्रभाव को पूरा कर रहे है:

Answer 1

LazyLoad अब वेबसाइट के अनुसार उपलब्ध नहीं है। स्पष्ट रूप से कोड अब नए ब्राउज़र पर काम नहीं करता है और लेखक के पास इसे अपडेट करने का समय नहीं है।

"दिखाई देने वाला" प्लग मेरे लिए अच्छा काम कर रहा है।

http://plugins.jquery.com/appear/

यह आप एक तत्व के लिए एक कॉलबैक फ़ंक्शन निर्दिष्ट करने के लिए अनुमति देता है। जब कॉल तत्व दृश्य में दिखाई देता है तो कॉलबैक फ़ंक्शन को कॉल किया जाता है। साइट से:

$('#foo').appear(function() { 
    $(this).text('Hello world'); 
}); 

Answer 2

आप जिस पृष्ठ पर संदर्भित के स्रोत को देखें, तो यह कोड के इस बिट में शामिल है।

http://www.appelsiini.net/projects/lazyload

Answer 3

"WP-सामग्री/plugins/jQuery छवि आलसी लोडिंग"

लेज़ी लोडर एक jQuery प्लगइन लिखा है: यह jQuery LazyLoad प्लगइन, यहां पाया जा सकता है जो का उपयोग करता है जावास्क्रिप्ट में । यह (लंबे) वेब पृष्ठों में छवियों को लोड करने में देरी करता है। व्यूपोर्ट के बाहर छवियों ( वेब पेज का दृश्य भाग) उपयोगकर्ता स्क्रॉल करने से पहले लोड नहीं किया जाएगा। यह छवि प्रीलोडिंग के विपरीत है।

लंबे वेब पृष्ठों पर आलसी लोड का उपयोग जिसमें कई बड़ी छवियां हैं पृष्ठ लोड तेज़ी से बनाता है। दृश्य छवियों को लोड करने के बाद ब्राउज़र तैयार राज्य में होगा। कुछ मामलों में यह सर्वर लोड को कम करने के लिए की सहायता भी कर सकता है।

http://www.appelsiini.net/projects/lazyload

तो यह यह निर्दिष्ट हर छवि के माध्यम से या एक तत्व के संदर्भ के अंदर चला जाता है लगता है और छवियों से पहले एक प्लेसहोल्डर gif पूरी तरह से लोड के साथ src बदल देता है, मूल यूआरआई सहेजता है और जब छवि "दृश्यमान" है यह प्लेसहोल्डर को वास्तविक छवि के साथ बदल देता है।

Answer 4

संजय ने बताया कि एप्पलिसिनी से jQuery LazyLoad प्लगइन अब काम नहीं करता है। यहां एक और jQuery प्लगइन है जो मैंने पाया। jQuery उपस्थिति के अलावा बस एक और विकल्प।

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/