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

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

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

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

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

Как упоминает Соне, но я бы добавил:

$("img").hide();

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

или:

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

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

$(function() {

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

});

Idea from: 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();
});

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

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

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

Вопрос в том, «jQuery. Как получить изображение, чтобы оно исчезло при загрузке?»

Сначала короткая заметка.

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

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

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

$("#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!"); };

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

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

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

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

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

Мне нужно решение, в котором НЕ используется эффект затухания 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, и изображение будет постепенно исчезать. Если изображение уже было сохранено в кэше браузера, оно немедленно исчезнет.

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

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

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

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

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

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

Надеюсь, что это поможет любому, кто наткнется на эту не очень полезную ветку в рейтинге Google.