Показывать изображение preloader при нажатии на тег <a>?

Question

Показывать изображение preloader при нажатии на тег <a>?

0

Я бы хотел, чтобы все теги HTML (<a href=...) отображали центр изображения (GIF preloader) на экране при нажатии. В настоящее время у меня есть код, показывающий индикатор выполнения загрузки, но он отображается только при загрузке этой страницы. Я хочу, чтобы предварительный загрузчик GIF показывался сразу после того, как пользователь нажал ссылку.

Какой код и где мне нужно добавить?

Nathan 14 март 2014, в 07:53

Источник

0

поделитесь своим кодом на JsFiddle
Dimag Kharab 14 март 2014, в 06:49

Теги:

javascript

jquery

html

hyperlink

preloader

3 ответа

Ещё вопросы

Rohan Kumar · Answer 1 · 2014-03-14T05-16-00.000Z

Попробуй это,

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

насколько я понял, ОП хочет показать изображение на текущей странице, пока загружается следующая страница. не будет ли это изображение на следующей странице после его готовности?
После обновления все равно как это загрузить другую страницу, пока отображается загрузчик?

JMD · Answer 2 · 2014-03-14T04-17-00.000Z

использовать jquery.imageloader()

<img class="img" src="image.png" />
<script>
$(function() {
$('.img').imageloader();
});
</script>

добавьте функцию к кнопке

Надеюсь это поможет.

Посетите здесь множество примеров.

.imageloader()

попробуйте это

John Kentucky · Answer 3 · 2014-03-14T05-33-00.000Z

Вы должны предварительно загрузить изображение. Для этого создайте элемент изображения и спрячьте изображение, только покажите его по щелчку.

ИЛИ

Вы можете вызвать createElement в функции готовности документа и установить его источник, как показано ниже:

var elem = document.createElement("img");
elem.setAttribute("src", "images/my_image.jpg");

Затем, когда вы используете этот источник в другом месте, он сразу отобразит изображение, поскольку оно уже загружено браузером.

Как это покажет изображение на текущей странице, пока загружается другая страница? по умолчанию при нажатии на гиперссылку браузер запускает процесс перенаправления.
@TilwinJoy В этом случае вы можете добавить обработчик по щелчку якоря, который удаляет / скрывает содержимое и показывает изображение прогресса, а затем возвращает true, чтобы браузер продолжил загрузку другой страницы.