আইই থেমে অ্যানিমেটেড জিআইএফ

Question

আইআই-তে আপনার লিঙ্কটিতে ক্লিক করার পরে বা পৃষ্ঠায় কোনও ফর্ম জমা দেওয়ার পরে অ্যানিমেটেড জিআইএফ এর অ্যানিমেটেড চালিয়ে যাওয়ার বিষয়ে কেউ কি কাজ জানেন? অন্যান্য ব্রাউজারগুলিতে এটি কাজ করে।

ধন্যবাদ।

Comments

এখানে কেবলমাত্র সঠিক উত্তরটি হল @ অ্যান্থনিডব্লু জোন্স ones পোস্টগুলির জন্য, প্রকৃত জমা দেওয়া (এজ্যাক্স নয়) কিছুই কাজ করে না।

— পি.ব্রায়ান.ম্যাকি

আসলে তা মোটেও সত্য নয়। অনসামিত ইভেন্টে চিত্রটি প্রদর্শনের জন্য একটি টাইমআউট ব্যবহার করা POST ফর্মের সাথে ঠিক কাজ করে।

— ওল্ড উইজার্ড

@ পি.ব্রায়ান.ম্যাকি - জে.ড্যাভিসের সমাধান আমার পক্ষে এমনকি একটি পোস্টের অনুরোধের জন্য কাজ করেছে। তবে আমরা সার্ভারের পাশের পদ্ধতিতে কল করতে আজাক্সকন্ট্রোল সরঞ্জামকিটও ব্যবহার করছি। এই ক্ষেত্রে এটি কাজ করে না।

— অঙ্কুর-মি

আপডেট অগ্রগতি অ্যানিমেটেড জিআইএফ

— জেসন ক্রেসোয়াটি

জোরদানের উত্তর এখানে দেখুন । আমি মনে করি এটি একটি ভাল সমাধান এবং এটি ডাউনলভেল আইইতেও কাজ করে।

— জেসন ক্রেসোয়াটি

Answer 1

গৃহীত সমাধানটি আমার পক্ষে কার্যকর হয়নি।

আরও কিছু গবেষণার পরে আমি এই কাজটি পুরোপুরি দেখতে পেয়েছি এবং এটি আসলে কাজ করে।

এখানে এর সংক্ষিপ্তসার:

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

এবং আপনার এইচটিএমএলে:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

সুতরাং ফর্মটি জমা দেওয়ার সময় <img/>ট্যাগটি sertedোকানো হয় এবং কোনও কারণে এটি অ্যানিমেশন ইস্যু দ্বারা প্রভাবিত হয় না।

ফায়ারফক্সে পরীক্ষা করা হয়েছে, অর্থাৎ,, অর্থাৎ and এবং ie8।

Comments

সূত্র: webproworld.com/ographicics-design-discussion-forum/…

— j.davies

আপনার কোডে আপনি কখনই কোনও পোস্ট পোস্ট করেন না। কেবলমাত্র "অনক্লিক =" জাভাস্ক্রিপ্ট কল। আপনি এটি জমা দেওয়ার জন্য ক্লিক করুন এবং এটি কার্যকর হয় না এমন প্রত্যাশা অনুযায়ী একটি পোস্ট দিয়ে চেষ্টা করেছি।

— পি.ব্রায়ান.ম্যাকি

আপনার অনক্লিকের শেষে আপনি মিথ্যা ফিরিয়ে না দিলে সাবমিট বাটনটি একটি পোস্ট পোস্ট করবে। সাবমিট বাটনগুলি এটাই করে।

— ফ্রাগ

-1 এই উত্তরটিও ভুল। এটি আই 7 এবং আই 88 তে কাজ করে না ফর্ম জমা দেওয়ার পরে জিআইফ চিত্রটি নিখরচায়।

— মার্কো ডেমাইও

এটি আমার জন্য jQuery ব্যবহার করে কাজ করেছিল। হ্যাকটি বেশ অদ্ভুত, আমাকে স্বীকার করতে হবে। এটি আমার উদাহরণে এটি কীভাবে কাজ করেছে: code<div id = "img_content"> <img id = 'aj_loader' src = 'اثاثون / 2631.gif' শৈলী = "প্রদর্শন: কিছুই নয়;" /> </div> এবং তারপরে: code$ ( "# img_content") HTML ($ ( "# img_content") এইচটিএমএল ()।)।

— মিসাইজডালেক

Answer 2

পুরানো প্রশ্ন, তবে সহ গুগলারের জন্য এটি পোস্ট করা:

স্পিন.জেএস এই ব্যবহারের ক্ষেত্রে কাজ করে: http://fgnass.github.com/spin.js/

Comments

সংশোধন, এটি কাজ করে তবে পৃষ্ঠা লোড হওয়ার ঠিক আগে অ্যানিমেটিং বন্ধ করে দেয়। সুতরাং এটি যদি একটি সংক্ষিপ্ত লোড হয় তবে এনিমেশনটি মূল ইস্যুর মতো স্থির হয়ে যায়।

— জেমস ম্যাকমাহন

দুর্দান্ত সমাধান, ie11 এ সূক্ষ্মভাবে কাজ করা এখনও সমস্ত আপ টু ডেট এবং সমর্থিত বলে মনে হচ্ছে।

— অ্যাডাম নাইটস

স্পিন.জেস দুর্ভাগ্যক্রমে যথেষ্ট সিপিইউ নিবিড়। দেখুন বিষয় / 8 , সংস্করণ / 200 , সংস্করণ / 215

— user247702

স্পিন.জেএস আইফোনে আমার পক্ষে কাজ করছে না। পৃষ্ঠাটি অন্য কোনওটিতে পুনর্নির্দেশ করার সাথে সাথে এটি হিমশীতলও হয়ে যায়।

— অঙ্কুর-মি

Answer 3

আইই ধরে নিয়েছে যে কোনও লিঙ্কে ক্লিক করা একটি নতুন নেভিগেশনকে হেরাল্ড করে যেখানে বর্তমান পৃষ্ঠার সামগ্রীগুলি প্রতিস্থাপন করা হবে। এটির জন্য পারফর্ম করার প্রক্রিয়ার অংশ হিসাবে এটি জিআইএফগুলি অ্যানিমেটেড কোডটি থামায়। আমি সন্দেহ করি যে এটি সম্পর্কে আপনারা যা কিছু করতে পারেন (যদি আপনি আসলে নেভিগেট না করেন তবে অনক্লিক ইভেন্টে মিথ্যা ফিরতি ব্যবহার করুন)।

Comments

+1 - আমি উভয় শীর্ষ উত্তর চেষ্টা করেছিলাম। কোনটিই কাজ করে না। আমি আমার সমস্ত ফর্মটি এজ্যাক্স অনুরোধগুলিতে জমা দিতে যাচ্ছি না।

— পি.ব্রায়ান.ম্যাকি

+1 আমি সম্মত, স্পিন.জেএস এবং কোডমনকি কাজের ক্ষেত্র ব্যতীত এটিই একমাত্র আসল সঠিক উত্তর।

— মার্কো ডেমাইও

এবং এখনও

— আই

এবং এখনও আই 11 এ!

— বিলেয়াজান

2017 চেক ইন!

— স্টিভ ওয়েকফোর্ড

Answer 4

এখানে একটি জেএসফিডাল যা পদ্ধতি = "পোস্ট" দিয়ে জমা দেওয়ার ফর্মটিতে ঠিক সূক্ষ্মভাবে কাজ করে। ফর্ম জমা দেওয়ার ইভেন্টে স্পিনার যুক্ত করা হয়।

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

এখানে jsFizz কোড দেখুন

এটি এখানে আপনার IE ব্রাউজারে পরীক্ষা করুন

Comments

হ্যাঁ, এটি দুর্দান্ত কাজ করে (কেবলমাত্র আইই 10 তে পরীক্ষা করা হয়েছে)। তবে আমি যখন মেমরিতে ছবিটি প্রিললোড করি তখন অ্যানিমেশন কেন বন্ধ হয় তা আমি কাজ করতে পারি না। আমি আপনার ফ্রিডলটিতে প্রিলোড করতে পারি এবং এটি ঠিক আছে, আমার কোডে নয়, আরগ করুন।

— সাইমন পূর্ব

আপনি কিছু ভুল করেছেন। :) আপনার পৃষ্ঠায় কোনও ইমগ ট্যাগ হিসাবে স্পিনার চিত্রটি যুক্ত করবেন? আমি ইউআরএল আপডেট করেছি। সাহায্য করতে পারে.

— ওল্ড উইজার্ড

আইই এটি একটি হতাশা মাত্র বলে মনে হচ্ছে। প্রি-লোড হওয়ার পরে অ্যানিমেশনটি থামায়। যখন jquery এর মাধ্যমে ইনজেকশন দেওয়া হয়, অ্যানিমেশনটি পাশাপাশি চাগতে থাকবে। এই সমাধানের জন্য ধন্যবাদ।

— অ্যান্টনি

Answer 5

আমি এই পোস্টে এসেছি, এবং এর উত্তর আগেই দেওয়া হয়েছে, অনুভূত আমার এমন কিছু তথ্য পোস্ট করা উচিত যা আইই 10-তে নির্দিষ্ট এই সমস্যাটি সম্পর্কে আমাকে সহায়তা করেছিল এবং অন্যদেরকেও একই ধরণের সমস্যার সাথে এই পোস্টে আসতে সহায়তা করতে পারে।

আমি স্তম্ভিত হয়ে পড়েছিলাম কীভাবে অ্যানিমেটেড জিআইএফগুলি কেবল আইই 10 তে প্রদর্শিত হচ্ছে না এবং তারপরে এই রত্নটি খুঁজে পেয়েছিল।

Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages

আশাকরি এটা সাহায্য করবে.

Comments

নাহ, এটি আই 11 এ সমস্যার সমাধান করে না (তবে সাহায্যের চেষ্টা করার জন্য +1)! :( এটি - আমার কাছে এই বিকল্পটি সক্ষম করা আছে এবং ইভেন্টে প্রদর্শিত beforeunloadবা অ্যানিমেটেড unload

— জিআইএফগুলি

এটি প্রশ্নে উত্থাপিত সমস্যার সাথে কোন সম্পর্ক নেই।

— ব্যবহারকারী 247702

Answer 6

একটি ফর্ম জমা দেওয়ার প্রক্রিয়া চলাকালীন লোডিং জিআইএফ দেখানোর চেষ্টা করার সময় আমি এই সমস্যার মুখোমুখি হয়েছি। এতে মজাদার একটি অতিরিক্ত স্তর ছিল যে ফর্মটি সঠিক ছিল কিনা তা নিশ্চিত করতে একই অনসুমিতকে একটি বৈধ চালক চালাতে হয়েছিল। সবার মতো (ইন্টারনেটে প্রতিটি আইআই / জিআইএফ ফর্ম পোস্টে) আমি লোডিং স্পিনারকে আইই-তে "স্পিন" করতে পারি না (এবং আমার ক্ষেত্রে, ফর্মটি বৈধতা / জমা দিন)। Http://www.west-wind.com এ পরামর্শ দেওয়ার সময় আমি ev13wt এর দ্বারা একটি পোস্ট পেয়েছি যাতে পরামর্শ দেওয়া হয়েছিল যে সমস্যাটি "... যে আইই চিত্রটি অ্যানিমেটেড হিসাবে রেন্ডার করে না যখন এটি রেন্ডার হয়েছিল। " যে বোধগম্য। তার সমাধান:

জিআইএফ যেখানে যাবে সেখানে ফাঁকা ছেড়ে যান এবং অনসামিত ফাংশনে উত্স সেট করতে জাভাস্ক্রিপ্ট ব্যবহার করুন - ডকুমেন্ট.জেটমেন্টমেন্টবাইআইডি ('লোডিংজিফ')। src = "জিআইএফ ফাইলের পথ"।

আমি এটি কীভাবে প্রয়োগ করেছি তা এখানে:

<script type="text/javascript">
    function validateForm(form) {

        if (isNotEmptyid(form.A)) {
            if (isLen4(form.B)) {        
                if (isNotEmptydt(form.C)) {
                    if (isNumber(form.D)) {        
                        if (isLen6(form.E)){
                            if (isNotEmptynum(form.F)) {
                                if (isLen5(form.G)){
                                    document.getElementById('tabs').style.display = "none";                
                                    document.getElementById('dvloader').style.display = "block";                
                                    document.getElementById('loadingGif').src = "/images/ajax-loader.gif"; 
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
        }
        return false;   
    }               
</script>

<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
    <!-- FORM INPUTS... -->
    <input type="submit" name="submit" value=" Authorize ">

    <div style="display:none" id="dvloader">  
        <img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
        Working... this process may take several minutes.
    </div>

</form>

এটি আমার জন্য সমস্ত ব্রাউজারে ভাল কাজ করেছে!

Comments

এসিআরসি সেট করা আমার পক্ষে আইই 11 তেও কাজ করেছিল। আমার ক্ষেত্রে, এটি প্রথমে img এইচটিএমএল পুনরায় যুক্ত করার সাথে একত্রিত হয়। আমার কেন দুজনের দরকার তা আমি নিশ্চিত নই। এটি লক্ষ্যণীয় আকর্ষণীয় যে আমি 'দৃশ্যমানতা' পরিবর্তনের বিপরীতে আমি 'প্রদর্শন' (ব্লক করতে) সেটও করছি।

— Cfold

Answer 7

আমি যা করেছি তা এখানে। আপনাকে যা যা করতে হবে তা হ'ল 10 টি চিত্র বলতে আপনার জিআইএফটি ভেঙে ফেলতে হবে ( এক্ষেত্রে আমি শুরু করে দিয়ে 01.gifশেষ করেছি 10.gif) এবং আপনি যে ডিরেক্টরিটি রেখেছেন তা নির্দিষ্ট করে দিন।

এইচটিএমএল:

<div id="tester"></div>

javascript:

function pad2(number) {   
    return (number < 10 ? '0' : '') + number 
}
var 
    dirURL = 'path/to/your/images/folder',
    ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
    jQuery('#tester').append(ajaxLoader);
    set(0);
});
function set(i) {
    if (i > 10) i = 1;    
    img.src = dirURL + pad2(i) + '.gif';
    setTimeout(function() {
        set(++i);
    }, 100);    
}

এই পদ্ধতিটি আই 7, আই 8 এবং আই 9 এর সাথে কাজ করে (আপনি যে আই 9 ব্যবহার করতে পারেন তার জন্য বিকল্প spin.js)। দ্রষ্টব্য: আমি 6০ এর দশক থেকে ব্রাউজার চালানোর কোনও মেশিন না থাকায় আমি আইআই 6 তে এটি পরীক্ষা করিনি, যদিও পদ্ধতিটি এত সহজ তবে এটি সম্ভবত আই 6 এবং এর চেয়ে কম ক্ষেত্রেও কাজ করে।

Comments

এই workaround স্পিনের একই নীতি উপর ভিত্তি করে কাজ করে, জেএস মূলত একটি জিএফ অ্যানিমেশন অনুকরণ করতে একটি জেএস সেটটাইমআউট ব্যবহার করে।

— মার্কো ডেমাইও

Answer 8

এর সাথে সম্পর্কিত আমাকে একটি ফিক্সটি খুঁজতে হয়েছিল যেখানে স্টাইলশিটে স্টাইলিং রাখা হয়েছে তা নিশ্চিত করতে অ্যানিমেটেড জিআইএফগুলি ব্যাকগ্রাউন্ড চিত্র হিসাবে ব্যবহৃত হয়েছিল। একটি অনুরূপ ফিক্স আমার জন্য সেখানেও কাজ করেছিল ... আমার স্ক্রিপ্টটি এরকম কিছু হয়েছিল (গণিত ব্যাকগ্রাউন্ড স্টাইলটি সহজতর করার জন্য আমি jQuery ব্যবহার করছি - কীভাবে jQuery ছাড়াই এটি করা যায় তা অন্য পোস্টের বিষয়):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[সম্পাদনা] কিছুটা বেশি পরীক্ষার মাধ্যমে আমি ঠিক বুঝতে পেরেছি যে এটি IE8 এর ব্যাকগ্রাউন্ড চিত্রগুলির সাথে কাজ করে না। একটি পৃষ্ঠা লোড করে জিআইএফ অ্যানিমেশন ওয়াইল রেন্ডার করতে আইই 8 পাওয়ার জন্য আমি যা ভাবতে পারি তার সবই আমি চেষ্টা করে দেখছি, তবে এই মুহুর্তে এটি সম্ভব বলে মনে হচ্ছে না।

Comments

আপনি jQuery ( $(spinner).css('background-image')) ব্যবহার করে সিএসএস কোডটি কেন পড়ছেন , তবে এটি একইভাবে সেট করার পরিবর্তে আপনি খাঁটি জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করছেন ( spinner.style.backgroundImage)। আপনার কোডটি কোনও ব্রাউজারে আমার জন্য কাজ করছে না। আমি যদি সরাসরি আপনার কোড ব্যবহার করি তবে আমি cannot set backgroundImage property of undefinedত্রুটি পাচ্ছি । আমি যদি আপনার কোডটি jQuery ব্যবহার করে CSS সেট করতে পরিবর্তন করি তবে কোডটি কোনও ত্রুটি ছাড়াই চলে তবে চিত্রটি পুনরায় সেট করা হয় না এবং ডিভ / স্পিনার উপাদানটি খালি থাকে। আমি জানি না, কেন?

— ট্রেজার্ড

যাচাই করা হয়েছে ! কোন সুযোগ নেই, আপনার কোড কাজ করবে। কোনও ব্রাউজারসম্পত্তিবাইভেন্টগুলিতেসেট করতে (ডিসেম্বর 2014 হিসাবে) সক্ষম নয় । বিস্তারিত জানতে এই প্রশ্ন বা এই jsFizz দেখুন। background-imageunloadbeforeunload

— ট্রাজডার

Answer 9

@ উদ্যানফোকসের জবাবের ভিত্তিতে এটি আইই 8 এবং এএসপি.নেট এমভিসি 3 এ আমার জন্য কাজ করেছে।

আমাদের _ লেআউট

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

<<< সামগ্রী এখানে >>> ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

এবং আমাদের নেভিগেশন লিঙ্কগুলিতে:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

অথবা

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })

Answer 10

Http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html এ এই সমাধানটি পেয়েছে এবং এটি কাজ করে! চিত্রটি দৃশ্যমান হওয়ার আগে কেবল পুনরায় লোড করুন। আপনার বোতামের অন্লিক থেকে নিম্নলিখিত জাভাস্ক্রিপ্ট ফাংশনটি কল করুন:

function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}

Answer 11

আমি বুঝতে পারি যে এটি একটি পুরানো প্রশ্ন এবং এখন অবধি মূল পোস্টারগুলির মধ্যে প্রতিটিই তাদের জন্য কাজ করে এমন একটি সমাধান খুঁজে পেয়েছে তবে আমি এই সমস্যাটি দেখেছি এবং ভিএমএল ট্যাগগুলি এই আইআই বাগের শিকার না হয় victim আইএম ব্রাউজারে ভিএমএল ট্যাগ ব্যবহার করে যখন পৃষ্ঠা আনলোড চলাকালীন অ্যানিমেটেড জিআইএফগুলি এখনও সরে যায়।

লক্ষ্য করুন আমি ভিএমএল ট্যাগগুলি ব্যবহারের সিদ্ধান্ত নেওয়ার আগে ভিএমএলকে প্রথম সনাক্ত করেছি যাতে এটি ফায়ারফক্স এবং অন্যান্য ব্রাউজারগুলিতে স্বাভাবিক অ্যানিমেটেড জিআইএফ আচরণ ব্যবহার করে কাজ করে।

আমি কীভাবে এটি সমাধান করেছি তা এখানে।

<input class="myExitButton" type="button" value="Click me"  />

<div class="loadingNextPage" style="display:none" >
    <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
    <img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
    <div>Just one moment while we access this information...</div>
</div>

<script language="javascript" type="text/javascript">
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            var supported = b ? typeof b.adj == "object" : true;
            a.parentNode.removeChild(a);
            return supported;
        };

        var showAnimationDuringPageUnload = function () {
            if (isVmlSupported()) {
                $(".loadingNextPage > .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage > .spinnerImageVml").hide();
            }
        };

        var openLoadingMessage = function () {
            $(".loadingNextPage").dialog({
                modal: true,
                closeOnEscape: true,
                title: 'Please wait...',
                closeText: 'x',
                height: getdialogHeight(200),
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

        $('.myExitButton').click(function () {
            openLoadingMessage();
            showAnimationDuringPageUnload();
            window.location.href = 'http://www.stackoverflow.com';
        });


        return progress;
    })(window.LoadProgress || {}, window.jQuery);
</script>

স্বাভাবিকভাবেই, এটি jQuery, jQueryUI এর উপর নির্ভর করে এবং কিছু প্রকারের ("/images/loading_gray.gif") এর একটি অ্যানিমেটেড জিআইএফ প্রয়োজন।

Answer 12

jQuery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Answer 13

ঠিক একটি অনুরূপ সমস্যা ছিল। এগুলি আমার পক্ষে নিখুঁতভাবে কাজ করেছে।

$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');

$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');

আর একটি ধারণা ছিল jQuery এর। লোড () ব্যবহার করা; লোড করুন এবং তারপরে চিত্রটি সংশোধন করুন।

IE 7+ এ কাজ করে

Answer 14

এটির উত্তর দিতে খুব দেরী হয়েছে, তবে আমি সবেমাত্র আবিষ্কার করেছি যে ব্যাকগ্রাউন্ড-ইমেজটি সিএসএসে বেস 64 হিসাবে ইউআরআই হিসাবে এনকোডযুক্ত, পৃথক চিত্র হিসাবে ধরে রাখা আইআই 8 এ অ্যানিমেটেড অবিরত রয়েছে।

Answer 15

খুব সহজ উপায় হল jQuery এবং সিম্পিমোডাল প্লাগইন ব্যবহার করা । তারপরে যখন আমাকে জমা দেওয়ার সময় আমার "লোডিং" জিআইএফ দেখানোর দরকার হয়, তখন আমি তা করি:

$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );

Answer 16

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

1) document.ready()পৃষ্ঠায় পাওয়া প্রতিটি ফরমে position:relativeসম্পত্তি পাওয়া যায় এবং তারপরে প্রত্যেকটির সাথে একটি অদৃশ্য থাকে DIV.bg-overlay।

২) এর পরে, ধরে নিলাম যে আমার ওয়েবসাইটের প্রতিটি জমা মান btn-primaryসিএসএস ক্লাস দ্বারা চিহ্নিত করা হয়েছে , আবার document.ready()আমি এই বোতামগুলির সন্ধান করি, প্রত্যেকের ফরমে প্যারেন্টের কাছে showOverlayOnFormExecution(this,true);চলে যাই, এবং ফর্ম জমা দেওয়ার পরে আমি ক্লিক করা বোতাম পেরিয়ে ফাংশন ফায়ার করি and একটি বুলিয়ান যা এর দৃশ্যমানতা টগল করে DIV.bg-overlay।

$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});

সিএসএসের জন্য DIV.bg-overlayনিম্নলিখিত:

.bg-overlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,0.6);
  z-index:100;
}

.bg-overlay img
{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
  margin-top:-40px;
  max-width:auto;
  max-height:80px;
}

3) যে কোনও ফর্ম জমা দেওয়ার সময়, নীচের ফাংশনটি পুরো জুড়ে একটি আধা-সাদা ব্যাকগ্রাউন্ড ওভারলে দেখায় (যা ফর্মের সাথে আবার ইন্টারঅ্যাক্ট করার ক্ষমতা অস্বীকার করে) এবং এর ভিতরে একটি অ্যানিমেটেড জিআইএফ (যা দৃশ্যত কোনও লোডিং ক্রিয়া দেখায়) দেখায় fired

function showOverlayOnFormExecution(clicked_button, showOrNot) 
{
    if(showOrNot == 1)
    {
        //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button 
        $(clicked_button).closest('form').find('.bg-overlay').show();
    }
    else
        $('form .bg-overlay').hide();
}

এই ইভেন্টে এটি সংযোজনের পরিবর্তে ফর্মটিতে অ্যানিমেটেড জিএফ দেখানো, বিভিন্ন ব্রাউজারের "জিআইএফ অ্যানিমেশন ফ্রিজ" সমস্যা সমাধান করে (যেমন বলা হয়েছে, আমি এই সমস্যাটি আইএম এবং ফায়ারফক্সে পেয়েছি, ক্রোমে নয়)