बड़ी छवि लोड होने पर लोडिंग छवि को कैसे दिखाया जाए?बड़ी छवि लोड होने पर लोडिंग छवि को कैसे दिखाया जाए?
उपयोगकर्ता फोटो एलबम में फोटो देखने पर ऑर्कुट में एक उदाहरण के रूप में फोटो पर पूरी तरह से लोड होने तक फ़ोटो पर दिखाया गया एक लोडिंग छवि है।
मुझे उस सुविधा को लागू करने की आवश्यकता है।
मेरा प्रश्न यह है कि उस सुविधा को कैसे कार्यान्वित किया जाए? क्या JQuery का उपयोग किए बिना यह संभव है?
कृपया मदद करें।
यहाँ एक बुनियादी तकनीक है कि तुम पर विस्तार कर सकते हैं साथ
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById('test').src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
अपनी छवि को एक div (या जो भी आप चाहते हैं) में लपेटें और इसकी पृष्ठभूमि छवि को एनिमेटेड gif या जो भी लोडिंग छवि आप चाहते हैं उसे सेट करें। जब छवि लोड हो जाती है तो यह पृष्ठभूमि छवि को कवर करेगी। आसान और जहां भी आप चाहते हैं पुन: उपयोग किया जा सकता है।
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
सीएसएस:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
रैपर 'div' आवश्यक नहीं है। आप छवि पर पृष्ठभूमि लागू कर सकते हैं। साथ ही, यदि छवि पारदर्शी है, तो लोडिंग छवि –
के नीचे दिखाई देगी क्या एएसपीनेट AJAX या JQuery के लिए सरल जावास्क्रिप्ट का उपयोग करने का कोई अन्य तरीका है। कृपया मदद करे। आपके उत्तर के लिए Thaks। – Himadri
@ हिमाद्री - आप इसे और अधिक जटिल क्यों बनाना चाहते हैं? – Skilldrick
आप jQuery Lazy Loading plugin इस्तेमाल कर सकते हैं। यह आपको एक लोडिंग छवि निर्दिष्ट करने की अनुमति देता है और जब तक उन्हें स्क्रॉल नहीं किया जाता है तब तक बड़ी छवियों को लोड करने में देरी हो जाती है।
क्या JQuery के बजाय asp.net AJAX या जावास्क्रिप्ट का उपयोग करने का कोई अन्य तरीका है? आपकी पोस्ट के लिए धन्यवाद। – Himadri
संपादित करें: स्पष्ट रूप से, इसे बहिष्कृत कर दिया गया है। यहाँ देखने के लिए कुछ भी नहीं है, आगे चलो।
इसके लिए कोई जावास्क्रिप्ट या सीएसएस आवश्यक नहीं है। img तत्वों के लिए बस अंतर्निहित, लेकिन शायद ही कभी lowsrc संपत्ति का उपयोग करें।
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
मूल विचार यह है कि आप अपनी सामान्य छवि का एक बहुत ही संकुचित, संभवतः काला और सफेद संस्करण बनाते हैं। यह पहले लोड हो जाता है और जब पूर्ण रिज़ॉल्यूशन छवि डाउनलोड की जाती है, ब्राउज़र स्वचालित रूप से इसे बदल देता है। सबसे अच्छा हिस्सा यह है कि आपको कुछ भी करने की ज़रूरत नहीं है।
यहाँ देखें: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
मेरी इच्छा है कि मैं इसे और अधिक उत्साह दे सकता हूं। – eyelidlessness
मैं इस जवाब से मोहक था क्योंकि मैंने पहले कभी 'lowsrc' संपत्ति के बारे में नहीं सुना है। मैंने एक Google खोज किया और इस पर आया: http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx ऐसा लगता है कि 'lowsrc' को बहिष्कृत किया गया है कुछ समय। 'Lowsrc' के लिए मिले एकमात्र स्रोत/पृष्ठ बहुत पुराने हैं। मैं परीक्षण करने के लिए किसी भी पेज का उपयोग करने में सक्षम नहीं था (और वास्तव में कार्रवाई में lowsrc देखें)। शायद मेरा कनेक्शन बहुत तेज है। – Jim
मेरी खोज ऑनलाइन से, ऐसा लगता है कि इस संपत्ति को जावास्क्रिप्ट का उपयोग कर वापस हैक किया जा सकता है। यदि आप http://validator.w3.org/ के माध्यम से छवि lowsrc विशेषता के साथ HTML स्रोत चलाते हैं तो यह दिखाएगा कि 'lowsrc' मान्य विशेषता नहीं है। – Jim
समय पहले मैं एक ऐसी ही समस्या के लिए कुछ इस तरह बनाया और अधिक व्यापक सामान करना है:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
मुझे लगता है कि इस दृष्टिकोण के कुछ उपयोगी फायदे हैं:
उत्तर निश्चित रूप से बक्षीस के लायक है। काम करता है और अच्छी तरह से समझाया। – matm