जीडब्ल्यूटी

Question

के साथ आलसी छवि लोडिंग Jquery और अन्य जेएस ढांचे में कई आलसी छवि लोडिंग प्लगइन्स, कोड-ब्लॉक हैं। ब्राउजर के दृश्य क्षेत्र में दिखाई देने पर मूल रूप से छवि लोड होती है।

जीडब्ल्यूटी में इसे कैसे प्राप्त किया जाए? मुझे पता है कि मैं जीडब्ल्यूटी में jquery प्लगइन का उपयोग कर सकता हूं, लेकिन देशी जीडब्ल्यूटी समाधान की तलाश में हूं।

तो, मैं कुछ हद तक सरल होना चाहिए कुछ इस तरह करना चाहते हैं ..

LazyImage img = new LazyImage("load.gif","original_thumb.png") 
scrollContainer.add(img); //scrollContainer is added to ScrollPanel 

Answer 1

मूल रूप से जेसन से समाधान। सिवाय इसके कि छवि लोड होने की आवश्यकता होने पर ही निर्णय लेती है।

class LazyImage extends Image { 

    private String fUrl; 
    private ScrollPanel fParent; 
    private boolean fLoaded; 

    public LazyImage(String url, ScrollPanel parent) { 
     fUrl = url; 
     fParent = parent; 
     attachHandlers(); 
    } 

    private void attachHandlers() { 
     fParent.addScrollHandler(new ScrollHandler() { 

      @Override 
      public void onScroll(ScrollEvent event) { 
       int imageTop = getAbsoluteTop(); 
       int viewport = fParent.getAbsoluteTop() + fParent.getOffsetHeight(); 
       if (imageTop < viewport) { 
        lazyLoad(); 
       } 
      } 
     }); 
    } 

    @Override 
    public void setUrl(String url) { 
     fLoaded = false; 
     fUrl = url; 
    } 

    public void lazyLoad() { 
     if (!fLoaded) { 
      super.setUrl(fUrl); 
      fLoaded = true; 
     } 
    } 
} 

Answer 2

यह। दो बुनियादी कदम हैं।

1.) एक विजेट बनाएं जिसे स्वचालित रूप से दिखाए जाने के बजाय प्रोग्राम को स्वचालित रूप से लोड करने के लिए कहा जा सके। लोड करने के लिए छवि के यूआरएल को स्टोर करें और इसे लोड करने के लिए एक तरीका है।

public class LazyImage extends Image { 
    private String url; 

    // Override behavior of base Image constructor to just store the URL. 
    public LazyImage(String url) { 
    this.url = url; 
    } 

    public void lazyLoad() { 
    super.setUrl(url); 
    } 
} 

यह नियमित Image वर्ग के रूप में ठीक उसी तरह इस्तेमाल किया जा सकता को छोड़कर आप lazyLoad() कॉल करने के लिए वास्तव में छवि प्रकट करने के लिए प्राप्त करने के लिए की आवश्यकता होगी।

2.) ScrollPanel का उपयोग करके छवि की आवश्यकता होने पर पता लगाएं।

मुझे अपने सिर के ऊपर से इस कोड के बारे में पूरी तरह से यकीन नहीं है, लेकिन यह मूल रूप से स्क्रॉल पैनल की स्क्रॉल स्थिति बनाम छवि के स्थान की तुलना करने के लिए उबाल जाएगा। यदि स्क्रॉल स्थिति> = स्क्रॉल पैनल के शीर्ष से छवि की दूरी, lazyLoad() पर कॉल करें और छवि दिखाई देगी।

मैंने इस कोड में से कोई भी कोशिश नहीं की है, यह केवल कुछ ऐसा काम है जो काम करना चाहिए। प्रश्न पूछने के लिए स्वतंत्र महसूस करें या प्रतिक्रिया दें अगर यह आपके लिए काम करता है/काम नहीं करता है।