2
在客戶端緩存它之後,有沒有一種最佳方式可以讓javascript/jquery優雅地淡入高分辨率圖像,這與Bing或Yahoo Mail的方式類似?在緩存後高分辨率圖像中淡入淡出
在客戶端緩存它之後,有沒有一種最佳方式可以讓javascript/jquery優雅地淡入高分辨率圖像,這與Bing或Yahoo Mail的方式類似?在緩存後高分辨率圖像中淡入淡出
您正在尋找jQuery中的加載函數。這裏有一個例子:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bigImg").load(function() {
$(this).fadeIn(2000);
});
});
</script>
</head>
<body>
<img id="bigImg" style="display:none" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/2006-03-26_Denver_Skyline_I-25_Speer.jpg" />
</body>
</html>
而jQuery的參考:http://api.jquery.com/load-event/
編碼愉快!
預壓時的圖像,我總是這樣做:
newpic = new Image(); // create your new img
newpic.onload = function() // callback for when the img is loaded
{
// your callback, for you a .fadeIn()
};
newpic.src = your_img.jpg; // Setting the img src will start the caching process
它運作良好。
在鏈接的加載事件頁面上有一些重要的注意事項。行爲是不一致的跨瀏覽器,並且它不會被緩存的圖像觸發,這是OP正在尋找的內容。 – Finbarr
我從你指的jquery文章中閱讀了這篇文章 - 他們確實將它列爲一個問題。我用螢火蟲進行測試,當從緩存中加載時,圖像完全沒有問題。我有些希望他們害怕的確切情況更明確。 –
搜索了一下之後,有人已經有了解決方法的答案:http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached –