使网站上的图像缓慢加载:)

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); 
}