जब एक iFrame लोड हो रहा हो तो लोडिंग संदेश कैसे प्रदर्शित करें?

Question

मेरे पास एक iframe है जो एक थर्ड पार्टी वेबसाइट को लोड करता है जो लोड करने के लिए बेहद धीमा है।

क्या कोई ऐसा तरीका है जिससे मैं लोडिंग संदेश प्रदर्शित कर सकता हूं जबकि iframe लोड करने पर उपयोगकर्ता को एक बड़ा रिक्त स्थान दिखाई नहीं देता है?

पुनश्च। ध्यान दें कि iframe एक तृतीय पक्ष वेबसाइट के लिए है, इसलिए मैं उनके पृष्ठ पर कुछ भी संशोधित / इंजेक्ट नहीं कर सकता।

Comments

हाँ, मैं iframes के लिए किसी भी प्रगति कॉलबैक से अवगत नहीं हूँ ... हम्म।

— जेफरी स्वीनी

Answer 1

मैंने निम्नलिखित सीएसएस दृष्टिकोण किया है:

<div class="holds-the-iframe"><iframe here></iframe></div>

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}

Comments

इसने मेरे मामलों के लिए एकदम सही काम किया। एक चुना हुआ उत्तर मेरे लिए काम नहीं करता था क्योंकि मैं iFrame को केवल तभी लोड कर रहा था जब एक टैब पर क्लिक किया जा रहा था। लेकिन यह एक iFrame स्रोत को लोड करते समय सुरुचिपूर्ण ढंग से प्रदर्शित होता है। लेकिन बहुत बुरा है कि यह जवाब के रूप में नहीं चुना गया था क्योंकि याकूब jQuery समाधान के लिए कहा ...

— नृत्य 2

यह अच्छी तरह से काम नहीं करता है यदि आपके द्वारा लोड किए जा रहे iframe में पारदर्शी पृष्ठभूमि है। आप iframe लोड होने के बाद भी लोडिंग gif देख सकते हैं!

— Westy92

@ कृष्ण यह ट्रिक IE-11 के लिए काम नहीं कर रहा है। क्या कोई हैक है?

— mmuzahid

Iframe onload फ़ंक्शन के साथ आप CSS बैकग्राउंड इमेज को हटा सकते हैं।

— ह्यूगो कॉक्स

बहुत बढ़िया जवाब। यह काम करता हैं। आप बेहतर रूप से कुछ ऊंचाई जोड़ रहे हैं ताकि लोडर आसानी से दिखाई दे।

— रज़

Answer 2

मुझे लगता है कि यह कोड मदद करने वाला है:

जे एस:

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

HTML:

<iframe src="http://google.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>

सीएसएस:

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ccc;
    top: 0px;
    left: 0px;
    position: absolute;
}

Comments

मैं समझता हूं कि #loadingMessageजब आप loadआग लगाते हैं तो आप क्यों छिपते हैं , लेकिन आप इसे क्यों छिपाते हैं ready? क्या यह बहुत जल्दी नहीं है?

— तेय्यद जुले

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

— मिंको गेचेव

jquery "जेएस" नहीं है।

— OZ_

@OZ_ कोड को वनीला जावास्क्रिप्ट के ऊपर कोड को चालू करके उपयोग करना मुश्किल नहीं है + s संपत्ति :-) का उपयोग addEventListenerऔर उपयोग करना । इसके अलावा, प्रश्न के लेखक ने टैग किया है । आपका संदेश क्यों नहीं मिल सकता है? :-)querySelectorstylejquery

— मिंको गेचेव

Answer 3

यदि यह केवल एक प्लेसहोल्डर है जिसे आप प्राप्त करने की कोशिश कर रहे हैं: एक पागल दृष्टिकोण पाठ को एक svg- पृष्ठभूमि के रूप में इंजेक्ट करना है। यह कुछ फ्लेक्सबिलिटी के लिए अनुमति देता है, और मैंने जो ब्राउज़र समर्थन पढ़ा है, वह काफी सभ्य होना चाहिए (हालांकि इसका परीक्षण नहीं किया गया है):

• क्रोम> = 27
• फायरफोक्स> = 30
• इंटरनेट एक्सप्लोरर> = 9
• सफारी> = 5.1

एचटीएमएल:

<iframe class="iframe-placeholder" src=""></iframe>

सीएसएस:

.iframe-placeholder
{
   background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat;
}

आप क्या बदल सकते हैं?

पृष्ठभूमि-मूल्य के अंदर:

• फ़ॉन्ट का आकार: फ़ॉन्ट-आकार = "" के लिए देखें और अपने इच्छित मूल्य को बदल दें

• फ़ॉन्ट रंग: भरने के लिए देखो = "" । यदि आप हेक्साडेसिमल रंग अंकन का उपयोग कर रहे हैं तो% 23 के साथ # को बदलना न भूलें। % 23 URL एन्कोडिंग में # के लिए खड़ा है, जो कि फायरफॉक्स में svg-string को पार्स करने में सक्षम होने के लिए आवश्यक है।

• फ़ॉन्ट परिवार: फ़ॉन्ट-परिवार के लिए देखें = "" एकल उद्धरण से बचने के लिए याद रखें यदि आपके पास एक फ़ॉन्ट है जिसमें कई शब्द हैं (जैसे \ 'ल्यूसिडा ग्रांडे')

• पाठ: उस पाठ-तत्व के तत्व मूल्य को देखें जहाँ आप PLACEHOLDER स्ट्रिंग देखते हैं । आप PLACEHOLDER स्ट्रिंग को ऐसी किसी भी चीज़ से बदल सकते हैं जो url-compliant हो (विशेष वर्णों को प्रतिशत अंकन में बदलने की आवश्यकता होती है)

फिडल पर उदाहरण

पेशेवरों:

• कोई अतिरिक्त एचटीएमएल-तत्व नहीं
• कोई जे.एस.
• बाहरी कार्यक्रम की आवश्यकता के बिना पाठ को आसानी से (...) समायोजित किया जा सकता है
• यह एसवीजी है, इसलिए आप आसानी से किसी भी एसवीजी को वहां रख सकते हैं।

विपक्ष:

• ब्राउज़र का समर्थन
• यह जटिल है
• यह हैक है
• अगर iframe-src में बैकग्राउंड सेट नहीं है, तो प्लेसहोल्डर चमक जाएगा (जो कि इस विधि से अंतर्निहित नहीं है, लेकिन iframe पर bg का उपयोग करने पर बस मानक व्यवहार)

मैं केवल इसे केवल तभी सुझाऊँगा, जब किसी iframe में प्लेसहोल्डर के रूप में टेक्स्ट दिखाना पूरी तरह से आवश्यक हो, जिसमें थोड़ी सी फ्लेक्सबिलिटी (कई भाषाओं, ...) की आवश्यकता हो। बस एक पल लें और उस पर प्रतिबिंबित करें: क्या यह सब वास्तव में आवश्यक है? अगर मेरे पास कोई विकल्प होता, तो मैं @ क्रिस्टीना की विधि के लिए जाता

Answer 4

$('iframe').load(function(){
      $(".loading").remove();
    alert("iframe is done loading")
}).show();


<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/>
<div class="loading" style="width:600px;height:300px;">iframe loading</div>

Comments

यह जरूरी नहीं कि किसी तृतीय पक्ष की वेबसाइट पर लोड होने वाले iframe के लिए एक अच्छा समाधान हो, क्योंकि उनके पेज पर jQuery नहीं हो सकता है।

— ल्यूक

Answer 5

यहाँ ज्यादातर मामलों के लिए एक त्वरित समाधान है:

सीएसएस:

.iframe-loading { 
    background:url(/img/loading.gif) center center no-repeat; 
}

आप चाहें तो एनिमेटेड लोडिंग GIF का उपयोग कर सकते हैं,

HTML:

<div class="iframe-loading">
    <iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

ऑन लोड घटना का उपयोग करके आप अपने आइफ्रेम के अंदर स्रोत पृष्ठ लोड होने के बाद लोडिंग छवि को हटा सकते हैं।

यदि आप jQuery का उपयोग नहीं कर रहे हैं, तो बस div में एक आईडी डालें और कोड के इस भाग को प्रतिस्थापित करें:

$('.iframe-loading').css('background-image', 'none');

कुछ इस तरह से:

document.getElementById("myDivName").style.backgroundImage = "none";

शुभकामनाएं!

Answer 6

हां, आप iframe क्षेत्र पर तैनात एक पारदर्शी div का उपयोग कर सकते हैं, केवल पृष्ठभूमि के रूप में लोडर gif के साथ।

तो आप एक onloadघटना को iframe में संलग्न कर सकते हैं :

 $(document).ready(function() {

   $("iframe#id").load(function() {
      $("#loader-id").hide();
   });
});

Answer 7

मैंने निम्नलिखित दृष्टिकोण का पालन किया है

सबसे पहले, सहोदर div जोड़ें

$('<div class="loading"></div>').insertBefore("#Iframe");

और फिर जब iframe ने लोडिंग पूरी की

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });

Answer 8

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=[e-mail]&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>

Answer 9

आप नीचे के रूप में उपयोग कर सकते हैं

$('#showFrame').on("load", function () {
        loader.hide();
});