jQuery Как добиться, чтобы изображение исчезало при загрузке?
https://stackoverflow.com/questions/1383870
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Все, что я хочу сделать, это исчезнуть с моего логотипа при загрузке страницы.Сегодня я новичок в 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>
Решение 13
Я узнаю ответ!Вам нужно использовать функцию window.onload, как показано ниже.Спасибо парню Tec и Кариму за помощь.Примечание:Вам все равно придется использовать функцию готовности документа.
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
У меня это также сработало, если поместить сразу после изображения... Спасибо.
Другие советы
Эта тема кажется излишне противоречивой.
Если вы действительно хотите правильно решить этот вопрос, используя jQuery, пожалуйста, ознакомьтесь с решением ниже.
Вопрос в том, "jQuery, как вы заставляете изображение исчезать при загрузке?"
Во-первых, небольшое замечание.
Это не очень хороший кандидат для $(document).готово...
Почему?Потому что документ готов, когда загружен HTML DOM.Изображение логотипа на этом этапе еще не будет готово - возможно, оно все еще загружается!
Итак, чтобы сначала ответить на общий вопрос "jQuery, как заставить изображение исчезать при загрузке?" - изображение в этом примере имеет атрибут 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!"); };
Конечно, у вас не было бы трех событий onload так близко друг к другу в вашем коде.Скорее всего, у вас есть скрипт, который выполняет что-то onload, а затем добавляет обработчик window.onload, чтобы он исчезал в вашем изображении - "почему мое слайд-шоу перестало работать !!?" - из-за проблемы с загрузкой window.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>
Используя примеры Сони и Карим79.Я тестировал это, и это работало как в 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/
С использованием Изображения Десандро загружены плагин
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>
Мне кажется, это лучший способ сделать это.Несмотря на самые благие намерения Сони, он не упомянул, что сначала для объекта необходимо настроить display:none с помощью CSS.Проблема здесь в том, что если по какой-либо причине JS пользователя не работает, объект просто никогда не появится.Нехорошо, особенно если это чертов логотип.
Это решение оставляет элемент в CSS один и сначала скрывает, а затем затемняет его с помощью JS.Таким образом, если JS не работает должным образом, элемент будет загружаться как обычно.
Надеюсь, это поможет всем, кто наткнется на эту не очень полезную ветку, занимающую первое место в рейтинге Google.
Как упоминает Соне, но я бы добавил следующее:
$("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, поскольку это вызывает задержку на многих мобильных устройствах.
Заимствование у Ответ Стива Фентона Я адаптировал эту версию, которая затемняет изображение с помощью свойства перехода 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
$(".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, и изображение станет плавным.Если изображение уже было сохранено в кеше браузера, оно немедленно исчезнет.
Использование этого для страницы со списком продуктов.
Возможно, это не самая красивая реализация, но она работает хорошо.
