Я хотел бы, чтобы тег all HTML link (<a href=...) отображал изображение (предварительный загрузчик GIF) в центре экрана при нажатии. В настоящее время у меня есть код, который показывает индикатор выполнения загрузки, но он отображается только при загрузке этой страницы. Я хочу, чтобы предварительный загрузчик GIF показывался немедленно после того, как пользователь щелкнул ссылку.
Какой код и куда добавить?
Попробуй это,
$(function(){
$('a').on('click',function(e){
$('<img src="image-pat/img.gif" class="image-loader"/>').appendTo('body');
// ....
// your code
// ....
if($('.image-loader').length) { // check length to remove image-loader again
$('.image-loader').remove();// use, if you want to remove the loader again
}
return true;
});
});
Вы должны предварительно загрузить изображение. Для этого либо создайте элемент изображения, либо скройте изображение, показывайте его только по клику.
OR
Вы можете вызвать createElement для функции готовности документа и установить ее источник, как показано ниже:
var elem = document.createElement("img");
elem.setAttribute("src", "images/my_image.jpg");
Затем, когда вы используете этот источник в другом месте, он сразу же покажет изображение, поскольку оно уже загружено браузером.
используйте jquery.imageloader()
<img class="img" src="image.png" />
<script>
$(function() {
$('.img').imageloader();
});
</script>
добавить функцию к кнопке
Надеюсь это поможет.
Посетите здесь для множества примеров.
попробуй это
