उपयोगकर्ताओं द्वारा दृश्य में स्क्रॉल किए जाने पर छवियों को गतिशील रूप से (या आलसी) कैसे लोड किया जाए

Question

मैंने इसे कई "आधुनिक" वेबसाइटों (जैसे फ़ेसबुक और गूगल इमेज सर्च) में देखा है, जहाँ फोल्ड लोड के नीचे की छवियाँ तभी दिखाई देती हैं जब उपयोगकर्ता दृश्य व्यूपोर्ट क्षेत्र के अंदर लाने के लिए पेज को नीचे स्क्रॉल करता है<img> ( व्यू सोर्स पर, पेज दिखाता है X टैग्स की संख्या लेकिन वे सीधे सर्वर से प्राप्त नहीं होते हैं )। इस तकनीक को क्या कहा जाता है, यह कैसे काम करता है और कितने ब्राउज़रों में काम करता है। और एक jQuery प्लगइन है जो न्यूनतम कोडिंग के साथ इस व्यवहार को प्राप्त कर सकता है।

संपादित करें

बोनस: अगर कोई "onScrolledIntoView" या HTML तत्वों के लिए इसी तरह की घटना के बारे में बता सकता है। यदि नहीं, तो ये प्लगइन्स कैसे काम करते हैं?

Comments

क्या आपको केवल छवि आलसी लोडिंग की आवश्यकता है? आप सामग्री आलसी लोड हो रहा है की जरूरत है, अनंत स्क्रॉल प्लगइन सही जवाब है

— soju

@rsp @jwegner @Nicholas को खेद है, लेकिन सलमान जो पूछ रहे हैं, वह नहीं है।

— एलेक स्मार्ट

@soju: मैं केवल आलसी लोडिंग छवियों में रुचि रखता हूं; लेकिन मैं भविष्य में (काफी दूर) भविष्य में अन्य संभावनाओं को देख सकता हूं।

— सलमान एक

आपको आश्चर्य होता है कि एक ब्राउज़र का डिफ़ॉल्ट व्यवहार केवल दिखाई देने वाली छवियों को लोड करने के लिए क्यों नहीं है। सोचिए अगर ऐसा होता तो पिछले 18 सालों में कितनी बैंडविड्थ बचाई जा सकती थी!

— मैथ्यू लॉक

जबकि मैं आलसी लोडिंग के पीछे का कारण समझता हूं ... मैं ईमानदारी से इसे बर्दाश्त नहीं कर सकता जब मैं उस साइट का दौरा करता हूं जो उस पद्धति का उपयोग करता है। छवियों के निमिष मुझे पागल ड्राइव! :)

— Booski

Answer 1

यहाँ कुछ उत्तर अनंत पृष्ठ के लिए हैं। सलमान जो पूछ रहे हैं वह छवियों का आलसी लोडिंग है।

लगाना

डेमो

EDIT: ये प्लगइन्स कैसे काम करते हैं?

यह एक सरलीकृत स्पष्टीकरण है:

1. खिड़की के आकार का पता लगाएं और सभी छवियों और उनके आकारों की स्थिति का पता लगाएं
2. यदि छवि खिड़की के आकार के भीतर नहीं है, तो इसे उसी आकार के प्लेसहोल्डर से बदलें
3. जब उपयोगकर्ता स्क्रॉल करता है, और छवि की स्थिति <स्क्रॉल + विंडो ऊंचाई, छवि लोड हो जाती है

Comments

आवेदन में, वे एक ही काम नहीं करेंगे? छवियों के एकल स्तंभ पर एक अनंत स्क्रॉल उन्हें आलसी लोड करने के समान होगा, है ना? शायद मैं उलझन में हूं।

— ज्वेगनर

@jwegner अनंत स्क्रॉल आपको उपयोगकर्ता के नीचे पहुंचने (या संपर्क करने) पर पृष्ठ के निचले भाग में नए आइटम जोड़ने देगा। आलसी-भरी हुई छवियां पृष्ठ पर समान आयामों के प्लेसहोल्डर हो सकती हैं, जिनमें छवियां स्वयं स्क्रॉल पर भरी हुई हैं। तो, बाद में पृष्ठ लेआउट को प्रभावित किए बिना आलसी लोड हो सकता है।

— अन्निका बैकस्ट्रॉम

यह डेस्कटॉप ब्राउज़र और iOS पर ठीक काम कर रहा है, लेकिन एंड्रॉइड (3.x / 4.x सहित) पर काम नहीं करता है। कोई विचार क्यों? क्या स्क्रॉल ईवेंट समर्थित नहीं है?

— लाह्रा

मैं इस प्लगइन के लिए प्रलेखन के माध्यम से जा रहा था और यह बहुत भयानक लगता है। मेरे अगले प्रोजेक्ट पर इसका इस्तेमाल करने जा रहे हैं।

— मफिन मैन

यहाँ एक संबंधित प्लगइन है, जो शायद उसी तरह से काम करता है: afarkas.github.io/lazysizes इसके अलावा मुझे लगता है कि यह बहुत अधिक मजबूत है और पहले से ही वहाँ क्या उपयोग करता है (उदाहरण के लिए प्लेसहोल्डर की कोई ज़रूरत नहीं है, लेकिन आप कर सकते हैं) चाहते हैं)।

— cregox

Answer 2

एओएल के डेव आर्टज़ ने पिछले साल jQuery सम्मेलन बोस्टन में अनुकूलन पर एक शानदार बात की। AOL स्क्रॉल स्थिति के आधार पर ऑन-डिमांड लोडिंग के लिए सोनार नामक टूल का उपयोग करता है। यदि यह पता लगाने के लिए कि तत्व या तत्व के सभी भाग दिखाई देते हैं, तो तत्व के लिए यह कैसे स्क्रॉलटॉप (और अन्य) की तुलना करता है, के कोड की जांच करें।

jQuery का सोनार

दवे इन स्लाइड्स में सोनार के बारे में बात करते हैं । सोनार स्लाइड 46 पर शुरू होती है, जबकि समग्र "लोड ऑन डिमांड" चर्चा स्लाइड 33 पर शुरू होती है।

Comments

मुझे आश्चर्य है कि यह एपेलसिनी के आलसीपन की तुलना कैसे करता है? क्या यह अधिक हल्का है? क्या यह हर ब्राउज़र पर काम करता है? मुझे याद है कि क्रोम पर काम करने में आलस नहीं होता है।

— 21

Answer 3

मैं अपनी खुद की मूल विधि के साथ आया था जो ठीक (अब तक) काम करने के लिए लगता है। संभवत: एक दर्जन चीजें हैं जिनमें से कुछ लोकप्रिय लिपियों के बारे में मुझे पता नहीं है।

नोट - यह समाधान तेजी से लागू करने के लिए आसान है लेकिन निश्चित रूप से प्रदर्शन के लिए महान नहीं है। अपूर्व द्वारा बताए गए नए Intersection Observer को निश्चित रूप से देखें और यदि डेवलपर्स एक समस्या है, तो उसे Developers.google द्वारा समझाया गया है ।

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

नमूना HTML कोड

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

व्याख्या की

जब पृष्ठ स्क्रॉल किया जाता है तो पृष्ठ पर प्रत्येक छवि की जाँच की जाती है ..

$(this).attr('data-src') - यदि छवि में विशेषता है data-src

और वे चित्र खिड़की के नीचे से कितनी दूर हैं ..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

आपको जो भी पसंद है + 100 समायोजित करें (- उदाहरण के लिए 100)

var source = $(this).data('src');- data-src=उर्फ छवि url का मान प्राप्त करता है

$(this).attr('src', source); - उस मूल्य में डालता है src=

$(this).removeAttr('data-src'); - डेटा-src विशेषता को हटाता है (इसलिए आपका ब्राउज़र उन संसाधनों से खिलवाड़ नहीं करता है जो पहले से लोड की गई छवियों के साथ गड़बड़ कर रहे हैं)

मौजूदा कोड में जोड़ना

एक संपादक में, अपने html बदलने के लिए बस खोज और की जगह src="के साथsrc="" data-src="

Comments

उत्तम। आशीर्वाद

— काल Lif

Answer 4

यहाँ एक बहुत अच्छा अनंत स्क्रॉल प्लगइन है

मैंने कभी भी अपने आप को प्रोग्राम नहीं किया है, लेकिन मुझे लगता है कि यह कैसे काम करता है।

1. एक घटना खिड़की स्क्रॉल करने के लिए बाध्य है

   $(window).scroll(myInfinteScrollFunction);

2. यदि स्क्रॉल टॉप विंडो के आकार से अधिक है, तो फ़ंक्शन को चेक करता है

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. AJAX का अनुरोध किया जाता है, यह निर्दिष्ट करने के लिए कि कौन सा परिणाम # शुरू करने के लिए, कितने हड़पने के लिए, और डेटा खींचने के लिए आवश्यक कोई अन्य पैरामीटर।

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. अजाक्स कुछ (सबसे अधिक संभावना JSON स्वरूपित) सामग्री देता है, और उन्हें लोडनिग फ़ंक्शन में पास करता है।

आशा है कि समझ में आता है।

Answer 5

घटनाओं को स्क्रॉल करने के लिए श्रोता को संलग्न करके या सेटइंटरवल का उपयोग करके आलसी लोडिंग छवियां अत्यधिक गैर-निष्पादित होती हैं क्योंकि getBoundingClientRect () के लिए प्रत्येक कॉल ब्राउज़र को पूरे पृष्ठ को फिर से लेआउट करने के लिए मजबूर करता है और आपकी वेबसाइट पर काफी मज़ाक पेश करेगा।

उपयोग Lozad.js (कोई निर्भरता के साथ सिर्फ 569 बाइट) है, जो का उपयोग करता है IntersectionObserver performantly आलसी लोड छवियों।

Comments

पॉलीफ़िल को गतिशील रूप से जोड़ा जा सकता है यदि ब्राउज़र समर्थन उपलब्ध नहीं है

— अपूर्वा सक्सेना

ब्राउज़र समर्थन इन दिनों बहुत बेहतर है - क्या मैं उपयोग कर सकता हूं

— Hastig Zusammenstellen

Answer 6

छवि आलसी लोडिंग का स्विस आर्मी चाकू YUI का ImageLoader है ।

क्योंकि स्क्रॉल की स्थिति को देखने की तुलना में इस समस्या के लिए अधिक है।

Answer 7

के लिए मुझे यह लिंक काम डेमो

1. jQuery लोडस्कॉलर प्लगइन jQuery लाइब्रेरी के बाद, लेकिन समापन बॉडी टैग से पहले।

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

Html5 डेटा-src विशेषता का उपयोग करके अपने वेबपेज में छवियों को जोड़ें। आप नियमित img src विशेषता का उपयोग करके प्लेसहोल्डर्स भी सम्मिलित कर सकते हैं।

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. img टैग पर प्लगइन को कॉल करें और आपकी छवि में आने के रूप में fadeIn प्रभाव की अवधि निर्दिष्ट करें

$('img').loadScroll(500); // in ms

Answer 8

Im jQuery का उपयोग कर आलसी । मेरी एक वेबसाइट ( CollegeCarePackages.com ) पर अधिकांश छवि लिंक जोड़ने के लिए मुझे लगभग 10 मिनट का समय लगा । मेरे पास देव के लिए किसी भी तरह का कोई (शून्य / शून्य) संबंध नहीं है, लेकिन इसने मुझे बहुत समय बचाया और मूल रूप से मोबाइल उपयोगकर्ताओं के लिए हमारी उछाल दर में सुधार करने में मदद की और मैं इसकी सराहना करता हूं।