उत्प्रेरक छवियों के बाद छवियों के आलसी लोड हो रहा है

Question

आकार दिया गया है मैं एक पृष्ठ है कि एक बार में कई सौ छवियों को प्रदर्शित करता पर काम कर रहा हूँ। पृष्ठ को तेज़ी से लोड करने की अनुमति देने के लिए मैं Lazy Load plugin का उपयोग कर रहा हूं। सब कुछ पूरी तरह से काम कर रहा है लेकिन मैं उन विस्तार/एक हैंडल खींच कर छवियों हटना करने की अनुमति के लिए एक jQuery यूआई स्लाइडर जोड़ दिया है। उन छवियों हटना तो यह है कि छवियों को तह के नीचे हुआ करता था अब दिखाई क्षेत्र में ले जाया गया है संभव है। चूंकि स्क्रॉलिंग नहीं हुई है, इसलिए छवियों को लोड नहीं किया गया है।

मैं जब आकार बदलने के हैंडल घसीटा जाता है लोड हो रहा है को गति प्रदान करने में एक ईवेंट जोड़ा, लेकिन यह सभी छवियों को लोड करने के लिए और न सिर्फ़ अपने देखने योग्य क्षेत्र में प्रवेश किया है कि खड़ी कर रहा है।

कोड बिल्कुल स्पष्ट है:

यहाँ प्लगइन ऊपर तार से जोड़ कोड है।

$("#pplImages.lazy").lazyload({event : "LoadVisibleImages"}); 

function LoadVisibleImages() { 
    $("#pplImages.lazy").trigger("LoadVisibleImages"); 
} 

और यहाँ कोड है कि स्लाइडर

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) {LoadVisibleImages();} 
}); 

से लोड हो रहा है चलाता है क्या मैं के लिए देख रहा हूँ केवल उन छवियों है कि अब देखा जा सकता है और नहीं पर सभी छवियाँ हैं लोड करने के लिए एक रास्ता है है पृष्ठ।

क्या कोई देख सकता है कि मैं क्या गलत कर रहा हूं?

Answer 1

इस प्लगइन के साथ एक मुद्दा हो सकता है। आधुनिक प्लगइन में काम नहीं कर रहे इस प्लगइन के बारे में interwebs पर बहुत सी चर्चा है।

JavaScript Asynchronous Image Loader (JAIL) पर एक नजर डालें। लेखक ने इसे इस समस्या के सीधी प्रतिक्रिया के रूप में लिखा: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL)।

This example छवि लोडिंग को ट्रिगर करने वाला एक ली दिखाता है। आप शायद ऐसा करने के लिए अपने कोड को संशोधित कर सकते हैं।

इस आजमाएं:

1. आईडी "ट्रिगर"
2. सेट अपने ResizeImages ढंग से काम ट्रिगर डोम वस्तु पर एक क्लिक के अनुकरण
3. अपने आलसी लोड परिवर्तन के साथ अपने पृष्ठ के लिए एक छिपा div जोड़ें जेल प्लगइन का उपयोग करने के लिए कोड और ट्रिगर ऑब्जेक्ट पर क्लिक होने पर इसे छवियों को लोड करने के लिए सेट करें।

आपका कोड कुछ इस तरह देख सकते हैं:

जावास्क्रिप्ट

$("#pplImages.lazy").jail({ 
    selector:'#trigger', 
    event: 'click' 
}); 

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) { 
     $('#trigger').click(); //Notice this simulated click event 
    } 
}); 

एचटीएमएल (सिर्फ अपने पृष्ठ में जोड़ना)

<div id="trigger" class="hidden"></div> 

आप होगा इस काम को पूरी तरह से बनाने के लिए चारों ओर झुकाव करने के लिए आप लेकिन उपरोक्त आपको शुरू करना चाहिए।