Подтвердить что ты не робот

JQuery Как вы получаете изображение, которое исчезает при загрузке?

Все, что я хочу сделать, - это угасать мой логотип на странице загрузки. Я новичок сегодня в jQuery, и мне не удалось сгладить загрузку, пожалуйста, помогите. Извините, если на этот вопрос уже был дан ответ, я посмотрел и попытался адаптировать другие ответы для разных вопросов, но ничего не работает, и его начало расстраивать меня.

Спасибо.

Код:

<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>
4b9b3361

ОТВЕТЫ

Ответ 1

Я выясню ответ! Вам нужно использовать функцию window.onload, как показано ниже. Спасибо Tec и Кариму за помощь. Примечание. Вам также необходимо использовать функцию готовности документа.

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

Он также работал у меня при размещении сразу после изображения... Спасибо

Ответ 2

Этот поток кажется излишне спорным.

Если вы действительно хотите правильно решить этот вопрос, используя jQuery, см. решение ниже.

Вопрос: "jQuery Как вы получаете изображение, которое исчезает при загрузке?"

Во-первых, быстрая заметка.

Это не хороший кандидат на $(document).ready...

Почему? Поскольку документ готов, когда загружается HTML DOM. На этом этапе изображение логотипа не будет готово - оно все равно может быть загружено на самом деле!

Итак, чтобы ответить сначала на общий вопрос "jQuery Как вы получаете изображение, которое исчезает при загрузке?" - образ в этом примере имеет атрибут id = "логотип":

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

Это именно то, что задает вопрос. Когда изображение загрузится, оно исчезнет. Если вы измените источник изображения, когда новый источник загрузится, он исчезнет.

Есть комментарий об использовании window.onload рядом с jQuery. Это вполне возможно. Оно работает. Это может быть сделано. Однако событие window.onload требует особого внимания. Это связано с тем, что если вы используете его более одного раза, вы перезаписываете свои предыдущие события. Пример (не стесняйтесь попробовать...).

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

Конечно, у вас не было бы трех событий с загрузкой, которые бы так близко друг к другу в вашем коде. У вас, скорее всего, будет script, который сделает что-то загруженное, а затем добавит обработчик window.onload в ваше изображение - "почему мое слайд-шоу перестало работать?" - из-за проблемы с window.onload.

Одна из замечательных особенностей jQuery заключается в том, что когда вы связываете события с помощью jQuery, они ВСЕ добавляются.

Итак, у вас есть это - вопрос уже отмечен как ответ, но ответ кажется недостаточным на основе всех комментариев. Надеюсь, это поможет любому, кто прибывает из мировых поисковых систем!

Ответ 3

У вас есть синтаксическая ошибка в строке 5:

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

Должно быть:

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

Ответ 4

Просто установите стиль логотипа на display:hidden и вызовите fadeIn вместо первого вызова hide:

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

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

Ответ 5

Чтобы сделать это с помощью нескольких изображений, вам нужно выполнить функцию .each(). Это работает, но я не уверен, насколько он эффективен.

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

Ответ 6

window.onload не заслуживает доверия. Я бы использовал:

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

Ответ 7

Используя примеры из 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"/>

Ответ 8

Ключ должен использовать $(window).load(function(){}, чтобы мы знали, что изображение загружено. Спрячьте изображение с помощью функции css, затем затушите его с помощью fadeIn:

$(function() {

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

});

Идея от: http://www.getpeel.com/

Ответ 9

ОК, поэтому я сделал это, и он работает. Это в основном взломали из разных ответов здесь. Поскольку STILL нет четкого ответа в этой теме, я решил опубликовать это.

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

Мне кажется, что это лучший способ. Несмотря на наилучшие намерения Sohnee, он не упомянул, что сначала должен быть установлен объект: none с CSS. Проблема здесь в том, что если по какой-либо причине пользователь JS не работает, объект просто не появится. Не хорошо, особенно если это логотип frikin.

Это решение оставляет элемент в CSS и сначала скрывается, а затем исчезает при использовании JS. Таким образом, если JS не работает должным образом, элемент будет загружен как обычно.

Надеюсь, что это поможет кому-то еще, кто споткнется в этот непрочитанный google рейтинг # 1.

Ответ 10

Как упоминает Sohne, но я бы добавил следующее:

$("img").hide();

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

или

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

Ответ 11

Я пробовал следующий, но не работал;

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

bu следующее работает отлично:

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

Ответ 12

CSS3 + jQuery Solution

Мне нужно решение, которое НЕ использовало эффект fade jQuery, поскольку это вызывает отставание во многих мобильных устройствах.

Заимствование из Ответ Стив Фентона Я адаптировал версию этого, которая затухает в изображении с помощью свойства перехода CSS3 и непрозрачности. Это также учитывает проблему кеширования браузера, и в этом случае изображение не будет отображаться с помощью CSS.

Вот мой код и рабочая скрипка:

HTML

<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 Snippet

$(".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, и изображение будет исчезать. Если изображение уже было сохранено в кэше браузера, оно сразу исчезнет.

Использование этого для страницы с листингом продукта.

Это может быть не самая красивая реализация, но она работает хорошо.

Ответ 13

Использование плагин desandro imagesloaded

1 - скрыть изображения в css:

#content img { 
    display:none; 
}

2 - затухают изображения при загрузке с помощью javascript:

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