使網站上的圖像緩慢加載:)

Question

有沒有一種方法來「模擬」緩慢加載圖像與JavaScript的早期網頁效果？

這樣的事情？

http://www.fugly.net/

Answer 1

首先的;這不是一個早期的網絡效應。這是由圖像的大小和您的互聯網連接速度和託管上傳速度造成的。

無論如何，如果你想有這樣的效果，理論上你必須首先加載圖像。

加載完每張圖片後;你必須追加和屏蔽div，並逐幀動畫到底部0。

基本上爲您的網頁上的所有圖片：

CSS

img{ 
    opacity:0; 
} 

.wrap { 
    height:0; 
    overflow:hidden; 
} 

JS

$(window).load(function(){ 
    var $images = $('img'); 

    $images.each(function(){ 
    var $wrapper = $('<div />').addClass('wrap'); 

    $(this).wrap($wrapper); 
    $(this).css('opacity', 1); 

    $(this).parent().animate({ 
     height: '768px' 
    }, 2000); 
    }); 
}); 

直播JS：

http://jsbin.com/bemulehu/1/

Answer 2

是，對於所有的圖像？

對於主圖像很容易做到。

您可以創建一個隱藏的div，將圖像設置爲背景，然後在document.ready（）上使用一個非常大的值來使用slideDown;

$(document).ready(function() { 
    $('#yourdiv').slideDown(99999999); 
}); 

:)

<div style='height: full height of the image'> 
    <div id='yourdiv'> 
    </div> 
</div> 

Answer 3

我不知道這是不是你在尋找什麼，但我扔東西在一起。

我將圖像封裝在一個div中，並在其中放置一個div，它會緩慢地每秒顯示一次圖像。我已隨機化了它在任何給定時間顯示的像素數量，因此看起來更真實一些。

Here is the fiddle

HTML：

<div class="container"> 
    <img id="flowerImage" src="http://i.imgur.com/xWVzyw9.jpg" /> 
    <div class="slowLoader"></div> 
</div> 

CSS：

#flowerImage{ 
    height: 300px; 
} 
.slowLoader{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background-color: white;   
} 
.container{ 
    display: inline-block; 
    width: auto; 
    height: auto; 
    position: relative; 
} 

的jQuery：

$(function(){  
    var slowLoadHandler = setInterval(function(){   
     var currentHeight = parseInt($(".slowLoader").css("height"));   
     if(currentHeight <= 0){ 
      clearInterval(slowLoadHandler); 
      return; 
     } 
     var changeHeight = getRandomArbitary(5,40); 
     currentHeight = currentHeight - changeHeight;   
     $(".slowLoader").css("height", currentHeight); 

    }, 1000); 
}); 
function getRandomArbitary (min, max) { 
    return Math.floor(Math.random() * (max - min) + min); 
}