Question

有没有办法用javascript“模拟”慢速加载图像的早期网页效果？

这样的东西？

http://www.fugly.net/

Answer 1

这是所有图像吗？

对于主图像来说非常容易。

你可以创建一个隐藏的div，将图像设置为背景，然后在document.ready（）上使用一个非常大的值的slideDown;

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

：）

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

Answer 2

我不知道这是不是你正在寻找的东西，但我把它扔在了一起。

我将图像包裹在一个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);
}

Answer 3

首先;这不是早期的网络效应。这是由图像的大小和您的互联网连接速度和主机上传速度造成的。

无论如何，如果你想得到这样的效果，理论上你必须首先加载图像。

加载每张图片后;你必须逐帧追加并屏蔽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);
  });
});

Live JS：

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

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

3 个答案: