jQuery كيف يمكنك الحصول على صورة لتتلاشى على الحمل؟

StackOverflow https://stackoverflow.com/questions/1383870

  •  21-09-2019
  •  | 
  •  

سؤال

كل ما أريد فعله هو أن تتلاشى شعوري في تحميل الصفحة. أنا جديد اليوم إلى jQuery ولا يمكنني تمكني من Fadein على التحميل ، الرجاء المساعدة. آسف إذا تم الإجابة على هذا السؤال بالفعل ، فقد ألقيت نظرة وحاولت تكييف إجابات أخرى لسؤال مختلف ، لكن لا شيء يبدو أنه يعمل ويبدأ في إحباطني.

شكرًا.

شفرة: 

<script type="text/javascript">                                         
$(function () {
.load(function () {
      // set the image hidden by default    
      $('#logo').hide();.fadeIn(3000);
                                }}                     
 </script>                
    <link rel="stylesheet" href="challenge.css"/>  
<title>Acme Widgets</title>         
  </head>     
  <body> 
     <div id="wrapper"> 
     <div id="header">
     <img id="logo" src="logo-smaller.jpg" /> 
     </div>
      <div id="nav">
      navigation
     </div>
      <div id="leftCol">
      left col
     </div>
      <div id="rightCol">
        <div id="header2">
        header 2
        </div>
        <div id="centreCol">
        body text
        </div>
        <div id="rightCol2">
        right col
        </div>
     </div>
     <div id="footer">
     footer
     </div>
     </div>
  </body>
</html>
هل كانت مفيدة؟

المحلول 13

اكتشفت الجواب! تحتاج إلى استخدام وظيفة window.onload كما هو موضح أدناه. بفضل TEC Guy و Karim للمساعدة. ملاحظة: لا تزال بحاجة إلى استخدام وظيفة Ready Instry أيضًا. 

window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););

لقد عملت أيضًا بالنسبة لي عند وضعها مباشرة بعد الصورة ... شكرًا

نصائح أخرى

هذا الموضوع يبدو مثير للجدل بشكل غير ضروري.

إذا كنت ترغب حقًا في حل هذا السؤال بشكل صحيح ، باستخدام jQuery ، يرجى الاطلاع على الحل أدناه.

السؤال هو "jQuery كيف تحصل على صورة لتتلاشى على الحمل؟"

أولا ، ملاحظة سريعة.

هذا ليس مرشحًا جيدًا لـ $ (وثيقة). جاهز ...

لماذا ا؟ نظرًا لأن المستند جاهز عند تحميل HTML DOM. لن تكون صورة الشعار جاهزة في هذه المرحلة - ربما لا يزال يتم تنزيلها في الواقع!

للإجابة أولاً على السؤال العام "jQuery كيف يمكنك الحصول على صورة لتتلاشى على الحمل؟" - تحتوي الصورة في هذا المثال على سمة id = "logo":

$("#logo").bind("load", function () { $(this).fadeIn(); });

هذا يفعل بالضبط ما يطلبه السؤال. عند تحميل الصورة ، ستتلاشى. إذا قمت بتغيير مصدر الصورة ، عند تحميل المصدر الجديد ، فسوف يتلاشى.

هناك تعليق حول استخدام window.onload إلى جانب jQuery. هذا ممكن تمامًا. إنها تعمل. يمكن إنجازه. ومع ذلك ، فإن حدث النافذة. الحمولة يحتاج إلى القليل من الرعاية. هذا لأنه إذا كنت تستخدمه أكثر من مرة ، فأنت في الكتابة فوق أحداثك السابقة. مثال (لا تتردد في تجربته ...).

function SaySomething(words) {
    alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };

بالطبع ، لن يكون لديك ثلاثة أحداث onload قريبة من بعضها البعض في الكود الخاص بك. من المرجح أن يكون لديك برنامج نصي يقوم بشيء ما ، ثم أضف نافذتك. معالج التحميل لتتلاشى في صورتك - "لماذا توقف عرض الشرائح الخاص بي عن العمل !!"؟ - بسبب مشكلة النافذة.

ميزة واحدة رائعة من jQuery هي أنه عند ربط الأحداث باستخدام jQuery ، يتم إضافتها جميعًا.

لذلك هناك - تم بالفعل وضع علامة على السؤال كما تم الإجابة عليه ، ولكن يبدو أن الإجابة غير كافية بناءً على جميع التعليقات. آمل أن يساعد هذا أي شخص يصل من محركات البحث في العالم!

لديك خطأ في بناء الجملة على السطر 5:

$('#logo').hide();.fadeIn(3000);

يجب ان يكون:

$('#logo').hide().fadeIn(3000);

ببساطة قم بتعيين نمط الشعار على display:hidden و اتصل fadeIn, ، بدلا من الاتصال الأول hide:

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>

للقيام بذلك مع صور متعددة تحتاج لتشغيلها على الرغم من .each() وظيفة. هذا يعمل لكنني لست متأكدًا من كفاءة ذلك.

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});

Window.onload ليس بهذا الجدير بالثقة .. أود أن أستخدم:

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>

باستخدام أمثلة من Sohnee و Karim79. لقد اختبرت هذا وعملت في كل من FF3.6 و IE6.

<script type="text/javascript">
    $(document).ready(function(){
        $("#logo").bind("load", function () { $(this).fadeIn('slow'); });
    });
</script>

<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>

المفتاح هو الاستخدام $(window).load(function(){} لذلك نحن نعرف أن الصورة محملة. إخفاء الصورة عبر وظيفة CSS ثم تلاشىها في استخدام Fadein:

$(function() {

  $(window).load(function(){
    $('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
  });

});

فكرة من: http://www.getpeel.com/

استخدام صور Desandro توصيل في

1 - إخفاء الصور في CSS: 

#content img { 
    display:none; 
}

2 - تتلاشى في الصور عند التحميل مع JavaScript:

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});

حسنًا ، لقد فعلت هذا وهو يعمل. تم اختراقه بشكل أساسي من ردود مختلفة هنا. لأنه ليس هناك ما يزال ليست إجابة واضحة في هذا الموضوع قررت نشر هذا. 

<script type="text/javascript">
  $(document).ready(function () {
    $("#logo").hide();
    $("#logo").bind("load", function () { $(this).fadeIn(); });
  });
</script>

يبدو لي أن هذا أفضل طريقة للقيام بذلك. على الرغم من أفضل نوايا Sohnee ، فشل في ذكر أنه يجب أولاً تعيين الكائن على عرضه: لا شيء مع CSS. المشكلة هنا هي أنه إذا لم يكن لدى المستخدم JS للمستخدم ، فلن يظهر الكائن أبدًا. ليس جيدًا ، خاصةً إذا كان شعار Frikin.

يترك هذا الحل العنصر بمفرده في CSS ، ويختبئ أولاً ، ثم يتلاشى في كل استخدام JS. بهذه الطريقة إذا كان JS لا يعمل بشكل صحيح ، فسيتم تحميل العنصر بشكل طبيعي.

نأمل أن يساعد ذلك أي شخص آخر يتعثر في هذا الخيط غير المثير للمرتبة رقم 1.

كما يذكر Sohne ، لكنني سأضيف هذا:

$("img").hide();

$("img").bind("load", function () { $(this).fadeIn(); });

أو:

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});

جربت ما يلي ولكن لم تنجح ؛

    <span style="display: none;" id="doneimg">
        <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
    </span>

    <script type="text/javascript">
        //$(document).ready(function () {
            $("#doneimg").bind("load", function () { $(this).fadeIn('slow'); });
        //});
    </script>

بو واحد التالي عملت على ما يرام.

<script type="text/javascript">
        $(document).ready(function () {
            $('#doneimg').fadeIn("normal");
        });
</script>

            <span style="display: none;" id="doneimg">
                <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
            </span>

حل CSS3 + jQuery

أردت حلًا لم يستخدم تأثير تلاشي JQuery لأن هذا يسبب تأخرًا في العديد من الأجهزة المحمولة.

الاقتراض من إجابة ستيف فنتون لقد قمت بتكييف نسخة من هذا يتلاشى الصورة مع خاصية Transition CSS3 وعتامة. يأخذ هذا أيضًا في الاعتبار مشكلة التخزين المؤقت للمتصفح ، وفي هذه الحالة لن تظهر الصورة باستخدام CSS.

ها هو الكود الخاص بي و عمل كمان:

لغة البرمجة

<img src="http://placehold.it/350x150" class="fade-in-on-load">

CSS

.fade-in-on-load {
    opacity: 0;
    will-change: transition;
    transition: opacity .09s ease-out;
}

مقتطف jQuery

$(".fade-in-on-load").each(function(){
    if (!this.complete) {
        $(this).bind("load", function () {
            $(this).css('opacity', '1');
        });
    } else {
        $(this).css('opacity', '1');
    }
});

ما يحدث هنا هو الصورة (أو أي عنصر) التي تريد أن تتلاشى فيها عندما يحتمل أن يحمل تحميل .fade-in-on-load فئة تطبق عليها مسبقا. سيؤدي ذلك إلى تعيينه عتامة 0 وتعيين تأثير الانتقال ، يمكنك تحرير سرعة التلاشي لتذوقها في CSS.

ثم سيبحث JS في كل عنصر يحتوي على الفصل وربط حدث التحميل به. بمجرد الانتهاء من ذلك ، سيتم ضبط العتامة على 1 ، وستتلاشى الصورة. إذا تم تخزين الصورة بالفعل في ذاكرة التخزين المؤقت للمتصفح بالفعل ، فستتلاشى على الفور.

باستخدام هذا لصفحة قائمة المنتجات.

قد لا يكون هذا أجمل تطبيق ولكنه يعمل بشكل جيد.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top