Question

我遇到了许多网站，这些网站一个接一个地使用延迟加载图片，我想知道如何做同样的事情。

所以我有一个包含3行4行图像的投资组合页面，我想要发生的是加载页面，除了img标签中的图像。一旦页面加载，我想要加载每行的图像1然后0.5秒后说出行中的下一个图像，所以没有。在显示实际图像之前，我将在每个图像框中都有一个加载gif。

我知道它可行，但似乎无法找到这样做的术语。这纯粹是因为它是一个设计网站。

感谢您的帮助。

Answer 1

这在jQuery中很容易做到

$('img').each(function(i) {
    $(this).delay((i + 1) * 500).fadeIn();
});

小提琴： http://jsfiddle.net/garreh/Svs7p/3

对于表中的逐行淡出行，这只是意味着稍微更改选择器。请记住从div更改为img - 我只是使用div进行测试

$('tr').each(function(i) {
    $('td div', this).delay((i + 1) * 500).fadeIn();
});

小提琴： http://jsfiddle.net/garreh/2Fg8S/

Answer 2

以下是您可以执行的操作，您可以使用src加载图像标记并使用自定义属性：

<img alt='The image' path='image/path.jpg' />

然后您可以在加载网站时或随时随地使用javascript加载图片;

// simplified
window.onload = function () {
  var images = document.getElementsByTagName('img');

  // loop and assign the correct
  for (var i =0; i < images.length;i++){
    var path = images[i].getAttribute('path');
    images[i].src = path;
  }
}

我希望你能得到图像延迟的概念

**请注意路径属性不是标准属性。

Answer 3

我能想到的最简单的方法是设置一个表，最终会保存图像标记，但是没有加载。 Javascript可以循环遍历图像网址数组，并将这些图像标记插入到桌面上的随机位置。

如果您想要延迟，setInterval是完美的工具。 http://www.w3schools.com/jsref/met_win_setinterval.asp

// You can hard-code your image url's here, or better still, write
// a server-side script that will read a directory and return them
// so it is fully dynamic and you can add images without changing code
unpickedImages = array();

// Start loading
loadAllImages = setInterval( insertImage, 600 );

function insertImage() {
    if( unpickedImages.length > 0 ) {
        var imageUrl = unpickedImages.shift();

        // pick empty x, y on your table

        // Insert the image tag im that <td></td>
    } else {
        clearInterval( loadAllImages );
    }
}

Answer 4

你真的不需要javascript来做到这一点。如果您在HTML或CSS中指定图像大小，浏览器将在加载图像时布局和显示页面，这些图像可能会并行加载。然后它会尽快显示出来。

这样，如果用户重新访问您的网站并缓存图片，则会立即显示。如果你有一个脚本在延迟后加载图像，你就会让访问者不必要地等待内容，并且所有他们努力拥有更快的浏览器并支付快速的互联网连接已经浪费了。

延迟图像显示目的不是使用JavaScript的效率？

4 个答案: