이미지 로더가 표시되지 않습니다.

Question

이미지가로드되는 동안 배경 이미지 (loading.gif)를 표시하려고합니다. 다음 코드 고맙습니다 이미지로드 :

var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>'); 
var img = item.find('img'); 
img 
    .hide() 
    .one('load', function() { $(this).removeClass('loading').attr('alt', data.title).attr('width', data.width).attr('height', data.height).fadeIn(); }) 
    .attr('src', data.src) 
    .each(function() { if (this.complete) $(this).trigger('load'); }); 

그래서 처음에 이미지에 추가 "로드"클래스가, 그리고 그 다음이 클래스는 이미지가 완전히로드 된 후에 제거 (및 표시)됩니다. 그래서 CSS 코드는 다음과 같습니다 이미지가로드 한 다음 표시하지만 이미지가로드되는 동안 로더 (이 here을 볼 수있다)이 표시되지 않습니다 :

.loading { background: #FFF url(../img/loading.gif) center center no-repeat; } 

문제는있다. ".hide()"를 삭제해야한다고 생각했지만 그때 이미지가 부분적으로 완전히로드되기 전에 표시 될 것입니다.

고맙습니다.

Answer 1

가 (새 이미지) 첫

var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>'); 
var img = item.find('img'); 
$('<img/>').attr('src', data.src).load(function() { 
     img.removeClass('loading').attr('src', data.src).hide().fadeIn(); 
}); 

Answer 2

window.onload = function() 
{ document.getElementById("loading").style.display = "none"; }