Jquery：加載DOM後的圖像淡入。有時候工作..？

//fade in images after the image has loaded.. 

$(document).ready(function(){ 
    $(".image_ad").hide().bind("load", function() { $(this).fadeIn(400); }); 
});

如果有人有任何意見，這將是偉大的。Jquery：加載DOM後的圖像淡入。有時候工作..？

我寫這個是爲了避免看圖片加載到頁面上，我寧願加載頁面，當每個圖片準備好時，它們都會很好地淡入。

問題是，有時幾張圖片永遠不會加載，刷新會糾正這一點，但我寧願讓它完美，詢問是否有人知道爲什麼。

我有，有時DOM還沒有完全通過腳本運行時加載的感覺，我知道這是一個的document.ready，但它可能會再次成爲可能..

感謝。

感謝您的所有答覆！我會在今晚播放片段，併發回我認爲有用的片段。再次感謝您的答覆。

如下所示，這似乎很適合我的需求。感謝大家。

$(document).ready(function(){ 
    $(".gallery_image").hide().not(function() { 
     return this.complete && $(this).fadeIn(100); 
    }).bind("load", function() { $(this).fadeIn(100); }); 
});

還有一兩件事，我不喜歡未完職位，...

我發現，在這不工作的Firefox 3.6.12。

我會着眼於此。

來源

2010-11-25 Iamsamstimpson

我猜這是因爲圖像被緩存，所以load從不會觸發。

嘗試被隱藏不包括高速緩存圖像：

$(document).ready(function(){ 
    $(".image_ad").not(function() { 
     return this.complete; 
    }).hide().bind("load", function() { $(this).fadeIn(400); }); 
});

或隱藏起來，但馬上做完整的人一個fadeIn。

$(document).ready(function(){ 
    $(".image_ad").hide().not(function() { 
     return this.complete && $(this).fadeIn(400); 
    }).bind("load", function() { $(this).fadeIn(400); }); 
});

來源

2010-11-25 16:41:55 user113716

不知道這是否會幫助或沒有，但你可以通過只添加這對你的CSS擺脫hide()呼叫：

img.image_ad{ 
    display: none; 
}

來源

2010-11-25 16:35:36 joeynelson

謝謝。有一個很好的理由，我不隱藏使用CSS的元素。如果用戶關閉了javascript，我希望他們仍然可以看到內容 - 如果他們有javascript，我希望jquery像平常一樣運行。多數民衆贊成在盡我所能：P感謝您的意見。 – Iamsamstimpson 2010-11-26 11:30:37

你最好通過CSS類隱藏圖像

.image_ad { display:none; }

然後設置：

$(document).ready(function(){ 
    $('.image_ad').fadeIn(400); 
});

這是什麼會做的是確保在圖像被隱藏開始用，然後一旦一切都被接收並加載，褪色的形象透視。

來源

2010-11-25 16:36:12 Jubair

這將導致它們在完全加載之前淡入。 OP的方法的目的是等待顯示它們直到它們被加載。 – user113716 2010-11-25 16:39:49

還有上面寫的「假設」。謝謝你的回覆。 – Iamsamstimpson 2010-11-26 11:31:56

我有，有時 DOM還沒有完全通過腳本運行的時間加載的感覺，我知道這是在的document.ready但也可能是可能..

我認爲這個問題是相當的其他方式：DOM的可能，滿載後的圖像有。所以，當你的負載處理程序被連接時，圖像已經被加載，處理程序永遠不會被觸發。

您可以通過檢查image.complete或通過js插入圖像並立即附加負載處理程序來解決此問題。

嘗試：

$(document).ready(function(){ 
    $(".image_ad").hide().bind("load", function() { $(this).fadeIn(400); }).each(function() { 
     if(this.complete && jQuery(this).is(":hidden")) { 
      jQuery(this).fadeIn(400); 
     } 
    }); 
});

（或類似的東西）。

來源

2010-11-25 16:37:44

我改編了我在另一個論壇上找到的一些代碼中的這個非常簡單的功能。它包含一個回調函數，供您在圖像加載完成時使用。雖然它在加載時不會在每幅圖像中淡入淡出，但是當指定容器中的所有圖像都完成加載時，它會淡入所有圖像中。我相信你可以調整它需要的代碼。

function imgsLoaded(el,f){ 
    var imgs = el.find('img'); 
    var num_imgs = imgs.length; 

    if(num_imgs > 0){ 
    imgs.load(function(){ 
     num_imgs--; 
     if(num_imgs == 0) { 
     if(typeof f == "function")f();//custom callback 
     } 
    }); 
    }else{ 
    if(typeof f == "function")f();//custom callback 
    } 
}

用法：

imgsLoaded($('#container'),function(){ 

$('.image_ad').fadeIn(400); 

});

希望這有助於！

來源

2010-11-25 16:42:24 wilsonpage

Jquery：加載DOM後的圖像淡入。有時候工作..？

回答

相關問題