Как я могу отобразить значок загрузки во время события изменения изображения. (без jQuery)

Question

Как я могу отобразить значок загрузки во время события изменения изображения. (без jQuery)

Я новичок в сообществе переполнения стека, а также в мире кодирования, так что пожалуйста, нести меня. Я сделал много поисков на этом сайте и за его пределами, но не смог найти решение этой конкретной ситуации.

Я добавил код на веб-страницу weebly (пример ниже), который изменяет неподвижное изображение на анимированный GIF при наведении курсора мыши и обратно на одно и то же изображение на мыши. Изменение изображения работает правильно, но поскольку GIF достаточно большой, требуется некоторое время для загрузки. И один раз при наведении курсора мыши нет указаний на загрузку изображения. У меня возникли проблемы с добавлением эффекта, позволяющего пользователю (в первую очередь самому) узнать, что изображение загружается в настоящее время. Я искал в Интернете и нашел много способов сделать анимацию загрузки css или добавить значок загрузки в одно изображение на странице загрузки, просто не могу найти способ добавить его во время смены изображения.

Я попытался:

• Css изображение анимация в качестве загрузчика (прекрасно работает, не может понять, куда добавить)

• Loader как CSS фоновое изображение. Изображение неподвижного изображения не исчезает до
  выставить загрузчик в фоновом режиме на мыши.

• Добавление div с загрузчиком поверх изображения, но элемент изображения не регистрирует наведение мыши через div «loader».

• Используя кнопки пуск/останов и анимировать их во время загрузки

и многих других подходов без успеха.

Я знаю, что у меня может быть предварительная загрузка GIF в фоновом режиме, но , так как есть мутированные изображения, они бы съедали слишком много данных на мобильном телефоне. Также изображения постоянно обновляются, поэтому их хранение локально не является вариантом. После поиска google и переполнения стека в течение нескольких недель подряд (не говоря уже о слишком многих учебниках по кодированию), я не могу найти решение, которое не связано с jquery. Я хотел бы избежать jquery из-за моей нехватки знаний в нем, а также, кажется, сложно реализовать в встроенный html-блок weebly. Я надеюсь выполнить эту задачу с помощью компиляции html, css и javascript, если это возможно.

Ниже приведен пример кода, с которым я работаю ниже. Код размещен во встроенном окне html на веб-странице Weebly. Я готов полностью отказаться от кода, если есть лучший способ добавить значок загрузки к изменению изображения без jquery.

<img id="pleasework" 
src="STILL IMAGE URL HERE" 
class="picswap" 
alt="not working" 

onmouseover="document.getElementById('pleasework') 
.src='GIF IMAGE URL HERE'" 

onmouseout="document.getElementById('pleasework') 
.src='STILL IMAGE URL HERE'" 
/> 

По сути я просто хотел бы, чтобы проникнуть в значок загрузки или что-то равного эффекта между еще и GIF изображений. Это может быть простое исправление, но я не могу это понять. Было бы почти неловко рассказать вам, сколько времени я потратил на эту конкретную задачу ... Просто нужно немного ориентироваться в том, куда идти с этим.

P.S. Это мой первый пост в переполнении стека, поэтому, пожалуйста, дайте мне знать, если мой вопрос задан неправильно или если я что-то упустил. Спасибо за ваше время.

Answer 1

Ну, один простой способ сделать это, сохраняя jQuery из уравнения, состоял бы в том, чтобы расположить div, содержащий значок загрузчика, над изображением, которое вы хотите поменять, с атрибутом display css none.

<div>&nbsp;<img src="someloader.gif" id="ourLoaderGif" style="display: none;" /></div> 

Теперь мы можем использовать немного ванили JS и SetTimeout для achomplish этого перехода от изображения к погрузчику изображения. В приведенном выше разделе nbsp останавливает развал div при загрузке загрузчика. Без этого, когда вы переключите отображение загрузчика, ваш макет будет казаться более нервным, а не жидким.

function imageOnMouseEnter() { 
    //How long to show the loader for in ms (eg enough time on average for your image to change) 
    var imageLoadTime = 1000; 

    //Show the loader 
    document.getElementById('ourLoaderGif').style.display = ''; 

    //Change the original image src 
    document.getElementById('pleasework').src = 'IMAGE-URL-HERE.png'; 

    //Set the timeout on the spinner 
    setTimeout('hideLoader()', imageLoadTime); 
} 

function hideLoader() { 
    document.getElementById('ourLoaderGif').style.display = 'none'; 
} 

только отдернуть к этому решению в настоящее время мы используем статическую переменные для нашего временного интервала вместо динамического времени от фактического изменения изображения, но, по крайней мере, это следует указать вам в правильном направлении !