যখন কোনও আইফ্রেম লোড হচ্ছে তখন লোডিং বার্তাটি কীভাবে প্রদর্শন করবেন?

107

আমার একটি আইফ্রেম রয়েছে যা একটি তৃতীয় পক্ষের ওয়েবসাইট লোড করে যা লোড করা অত্যন্ত ধীর।

কোনও উপায় কি আমি কোনও লোডিং বার্তা প্রদর্শন করতে পারছি যখন এই যে iframe লোড করে ব্যবহারকারী কোনও বিশাল ফাঁকা জায়গা দেখতে পাবে না?

পুনশ্চ. নোট করুন যে iframe একটি তৃতীয় পক্ষের ওয়েবসাইটের জন্য তাই আমি তাদের পৃষ্ঠায় কোনও কিছু সংশোধন / ইনজেকশন করতে পারি না।

javascript jquery iframe

— জ্যাকব
সূত্র

হ্যাঁ, আমি আইফ্রেমেসের জন্য কোনও অগ্রগতি কলব্যাক সম্পর্কে অবগত নই ... হুম।

— জেফরি সুইনি

231

আমি নিম্নলিখিত সিএসএস পদ্ধতির কাজটি করেছি:

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

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

— ক্রিস্টিনা
সূত্র

1

এটি আমার ক্ষেত্রে উপযুক্ত ছিল। একটি নির্বাচিত উত্তর আমার পক্ষে কাজ করে না কারণ আমি যখন আইফ্রেমটি লোড করছিলাম তখনই যখন কোনও ট্যাব ক্লিক করা হত। তবে এটি আইফ্রেম উত্সটি লোড করার সময় মার্জিতভাবে প্রদর্শিত হয়েছে। তবে খুব খারাপ যে এটি উত্তর হিসাবে বেছে নেওয়া হয়নি কারণ জ্যাকব jQuery সমাধান চেয়েছিলেন ...

— নাচ 2 ডি

21

আপনি যদি লোড করছেন আইফ্রেমে স্বচ্ছ পটভূমি থাকে তবে এটি ভাল কাজ করে না। ইফ্রেমে লোড হওয়ার পরেও আপনি লোডিং জিআইএফ দেখতে পাবেন!

— Westy92

3

@ ক্রিস্টনা এই কৌশলটি আইই -11 এর জন্য কাজ করছে না। কোন হ্যাক আছে?

— মিমুজাহিদ

3

Iframe অনলোড ফাংশন দিয়ে আপনি CSS ব্যাকগ্রাউন্ড চিত্রটি সরাতে পারেন।

— হুগো কক্স 0

1

দুর্দান্ত উত্তর। এটা কাজ করে। আপনি আরও কিছুটা উচ্চতা যুক্ত করুন যাতে লোডার সহজেই দৃশ্যমান হয়।

— রাজ

33

আমি মনে করি যে এই কোডটি সাহায্য করবে:

জাতীয়:

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

এইচটিএমএল:

<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;
}

— মিনকো গেচেভ
সূত্র

আমি বুঝতে পারি আপনি আগুনের #loadingMessageসময় কেন লুকিয়ে থাকেন load, তবে আপনি কেন এটি লুকিয়ে রাখেন ready? খুব তাড়াতাড়ি না?

— teedyay

1

এটি ব্যবহারকারীর প্রয়োজনের উপর নির্ভর করে। লোডিং বার্তাটি লুকানোর আগে যদি তার সমস্ত চিত্র লোড করার প্রয়োজন না হয় তবে তার উপর লোড কলব্যাকের প্রয়োজন হবে না।

— মিনকো গেচেভ

9

jquery "জেএস" নয়।

— ওজেড_

5

@OZ_ এটি হার্ড ব্যবহার করে ভ্যানিলা জাভাস্ক্রিপ্ট উপরের কোড ঘুরে নয় addEventListenerএবং ব্যবহার querySelector+ + styleগুলি সম্পত্তি :-)। এটি ছাড়াও, প্রশ্নের লেখক ট্যাগ করেছেন jquery। আপনার বার্তাটি কেন পাওয়া গেল না? :-)

— মিনকো গেচেভ

17

যদি এটি কেবলমাত্র কোনও স্থানধারককে অর্জন করার চেষ্টা করছেন: একটি ক্রেজি অ্যাপ্রোচ হ'ল একটি এসজিজি-ব্যাকগ্রাউন্ড হিসাবে পাঠ্য ইনজেক্ট করা। এটি কিছুটা নমনীয়তার জন্য অনুমতি দেয় এবং ব্রাউজার সমর্থন যা আমি পড়েছি তা থেকে মোটামুটি শালীন হওয়া উচিত (যদিও এটি পরীক্ষা করা হয়নি):

ক্রোম> = 27
ফায়ারফক্স> = 30
ইন্টারনেট এক্সপ্লোরার> = 9
সাফারি> = 5.1

এইচটিএমএল:

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

CSS:

.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 টি ইউআরএল এনকোডিংয়ে একটি # এর জন্য দাঁড়ায় যা ফায়ারফক্সে এসভিজি-স্ট্রিং পার্স করতে সক্ষম হয়।
হরফ পরিবার: হরফের জন্য ফন্ট-পরিবার = "" যদি আপনার একাধিক শব্দের সমন্বিত একটি ফন্ট থাকে (যেমন Luc 'লুসিডা গ্র্যান্ডে \' এর মতো) তবে একক উদ্ধৃতি থেকে বাঁচতে ভুলবেন না
পাঠ্য: পাঠ্য-উপাদানটির উপাদান মানটি সন্ধান করুন যেখানে আপনি PLACEHOLDER স্ট্রিংটি দেখেন । আপনি ইউএসএল-সম্মতিযুক্ত যে কোনও কিছু দিয়ে প্লাসহোল্ডার স্ট্রিং প্রতিস্থাপন করতে পারেন (বিশেষ অক্ষরগুলি শতাংশ স্বরলিপিতে রূপান্তরিত করা দরকার)

ফিজল উপর উদাহরণ

পেশাদাররা:

কোনও অতিরিক্ত এইচটিএমএল-উপাদান নেই
না জেএস
বাহ্যিক প্রোগ্রামের প্রয়োজন ছাড়াই পাঠ্য সহজেই (...) সমন্বয় করা যায়
এটি এসভিজি, যাতে আপনি সেখানে যে কোনও এসভিজি সহজেই রাখতে পারেন।

কনস:

ব্রাউজার সমর্থন
এটা জটিল
এটা হ্যাকি
যদি iframe-src এর ব্যাকগ্রাউন্ড সেট না থাকে, স্থানধারকটি জ্বলজ্বল করবে (যা এই পদ্ধতির অন্তর্নিহিত নয়, তবে আপনি যদি আইফ্রেমে কোনও বিজি ব্যবহার করেন তখন কেবল স্ট্যান্ডার্ড আচরণ)

আমি কেবল তখনই এটি সুপারিশ করবো যদি কোনও আইফ্রেমে স্থানধারক হিসাবে পাঠ্য প্রদর্শন করা একেবারে প্রয়োজনীয় হয় যার জন্য কিছুটা নমনীয়তা প্রয়োজন (একাধিক ভাষা, ...)। কিছুটা সময় নিয়ে তার প্রতিফলন করুন: এগুলি কি আসলেই প্রয়োজনীয়? আমার যদি পছন্দ হয় তবে আমি @ ক্রিস্টিনার পদ্ধতিতে যেতে চাই

— Pascalculator
সূত্র

5

$('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>

— লবণের হারকেট
সূত্র

এটি কোনও তৃতীয় পক্ষের ওয়েবসাইটে লোড হওয়া আইফ্রেমের পক্ষে ভাল সমাধান নয়, কারণ তাদের পৃষ্ঠায় তাদের jQuery নাও থাকতে পারে।

— লুক

4

বেশিরভাগ ক্ষেত্রে এর দ্রুত সমাধান এখানে দেওয়া হল:

সিএসএস:

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

আপনি চাইলে অ্যানিমেটেড লোডিং জিআইএফ ব্যবহার করতে পারেন,

এইচটিএমএল:

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

অনলোড লোড ইভেন্টটি ব্যবহার করে আপনি আপনার আইফ্রেমের অভ্যন্তরে উত্স পৃষ্ঠাটি লোড হওয়ার পরে লোডিং চিত্রটি সরাতে পারবেন।

আপনি যদি jQuery ব্যবহার না করে থাকেন তবে কেবল ডিভিতে একটি আইডি রাখুন এবং কোডের এই অংশটি প্রতিস্থাপন করুন:

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

এরকম কিছু দ্বারা:

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

শুভকামনা!

— ডেভিড টলেডো
সূত্র

2

হ্যাঁ, আপনি কেবল ব্যাকগ্রাউন্ড হিসাবে লোডার জিএফ সহ ইফ্রেমে অঞ্চল জুড়ে একটি স্বচ্ছ ডিভ ব্যবহার করতে পারেন could

তারপরে আপনি onloadiframe এর সাথে একটি ইভেন্ট সংযুক্ত করতে পারেন :

 $(document).ready(function() {

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

— maxijb
সূত্র

1

আমি নিম্নলিখিত পদ্ধতির অনুসরণ করেছি

প্রথমে ভাইবোন ডিভ যোগ করুন

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

এবং তারপরে যখন iframe লোডিং শেষ হয়

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

— গৌরভ
সূত্র

0

<!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=test@user8.com&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>

— Romi
সূত্র

-1

আপনি নীচের হিসাবে ব্যবহার করতে পারেন

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

— রমেশ নারায়ণ
সূত্র