Как добавить загрузку «spinner»

Question

У меня есть очень простые js (я все еще изучаю), который в основном читает элементы формы и создает строку url, которая передается на сервер обработки изображений, что в свою очередь отображает образ.

var imgURL = "site.com/path/to/image"; 
var product = "BirthdayCard_End" + "?&"; 
var page = 2; 
var format; 
var data; 

function setPage(inputID) 
    { 
     page = inputID; 
     setJPG(); 
    } 

function FormValues() 
    { 
     var str = ''; 
     var elem = document.getElementById('form1').elements; 
     for(var i = 0; i < elem.length; i++) 
     { 
      str += "$" + elem[i].id + "=" + elem[i].value + "&"; 
     } 
     data = str;   
    } 

function genPDF() 
    { 
     var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1"; 
     fullURL = imgURL + product + data + format; 
     window.open(fullURL);  

    } 

function setJPG() 
    { 
     FormValues(); 
     var format = "imageRes=200&fmt=jpg&wid=550&page=" + page; 
     fullURL = imgURL + product + data + format; 
     document.getElementById('lblValues').innerHTML = fullURL; 
     document.getElementById('image').src = fullURL; 
    } 

я пытаюсь выяснить, как показать простой загрузчик вроде этого (http://fgnass.github.com/spin.js/#v1.2.5). как добавить что-то к функции setJPG(), чтобы он всплывал загрузчик каждый раз, когда он инициализирован, а затем исчезает после загрузки изображения?

Answer 1

Предложенное решение

Для изображений, используя «загрузочный счетчик» проблематичен. Смотри ниже.

Вместо поворотника сначала отправьте низкое разрешение (см. B & W too). This SO question tells how.

блесны для загрузки изображений

Проблема с отображением на вертушку, пока вы ждете изображения, которое будет отображаться в том, что браузеры не позволяют надежно сказать ваш JS, когда изображение загружается.

И если это не сработает, то вы остаетесь, глядя на блесны навсегда ...

Смотрите документацию для jQuery load event -

предостережений случае нагрузки, когда используется с изображениями

Общая проблема, которую разработчики пытаются решить с помощью ярлыка .load(), - это выполнить функцию, когда изображение (или коллекция изображений) полностью загружено. Есть несколько известных оговорок с этим, что следует отметить.К ним относятся:

• Она не работает стабильно и не надежно кроссбраузерный
• Это не срабатывает правильно в WebKit, если ЦСИ изображения установлен в том же ЦСИ, как и прежде
• Это не правильно пузырек вверх по DOM дерево
• Может прекратить огонь для изображений, которые уже живут в кэше браузера

Answer 2

Самый простой способ сделать это - создать два div один над другим. Один div со счетчиком, закрывающим div содержимым, а затем, когда страница заканчивает загрузку, чтобы отобразить div с содержимым над ним.

В этом примере я использую его на window.load, поэтому вам может потребоваться изменить событие для загрузки изображения. Остальное должно работать нормально.

CSS:

#preloader { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background:white; 
opacity:0.3; 
z-index:2; 
} 
#spinner_container { 
position:absolute; 
width:100%; 
top: 50%; 
left:0px; 
height:1px; 
overflow:visible; 
opacity: 1; 
background: transparent; 
} 
#spinner { 
width: 31px; 
height:31px; 
margin-left:-15px; 
position:absolute; 
top:-15px; 
left:50%; 
display:block; 
} 

HTML

<div id="preloader"> 
<div id="spinner_container"> 
<img id="spinner" src="/content/images/spinner_squares_circle.gif" alt="" /> 
</div> 
</div> 
<div id="wrapper"> 
content 
</div> 

JQuery

$(window).load(function(){ 

    $('#preloader').fadeOut(100, function() { 
       $('body').css('overflow','auto'); 
       $(this).remove(); 
    }); 
}); 

Answer 3

Вы, ребята, делаете этот путь более сложным, чем это должно быть. Поместите свое изображение в div и установите фон div как анимированный gif.

<div style="background-image: url('spinner.gif')"><img src='bigImage.jpg'></div> 

Не нужно использовать какой-либо JS вообще, изображение просто загружает фоновый счетчик.

Answer 4

Просто добавьте вращающийся gif в div диаграммы, он будет автоматически заменен графиком google при загрузке. Подобно этому, «»

Answer 5

Если вы используете Spectre css, вы можете добавить DIV, чтобы добавить счетчик:

<link href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.3.1/spectre.min.css" rel="stylesheet"/> 
 

 
<div class="loading"></div>