推迟img加载，直到页面加载后？

我想知道是否有任何标准推迟所有负载，然后通过编程方式后来调用它们？有兴趣做类似Facebook的事情，其中极小的模糊JPEG被设置为背景图像，然后在页面加载中调用完整的res图像。推迟img加载，直到页面加载后？

实施例：

HTML

<img class='load-later' src='example.com/image.jpg'>

CSS

img.load-later { 
    background-image: url('blurry-preview.jpg'); 
}

function pageLoad() { 
    $('.load-later').load(); 
}

来源

2015-11-03 Isaac Hinman

这就是所谓的渐进式加载http://webmasters.stackexchange.com/questions/574/progressive-jpeg-why-do-many-web-sites-avoid-rendering-jpegs-that-way-pros如果你现在想要到延迟加载图像，然后有许多插件已经可用，例如：http://www.appelsiini.net/projects/lazyload但现在，我不知道你的问题是什么？！？ –

首先将src属性设置为“blurry-preview.jpg”图像，然后在稍后阶段将其更改为实际图像src。愚蠢的，简单的例子（使用JQuery）：

<img src="blurry-preview.jpg" alt="something" class="imgo" /> 

$(document).ready(function() { 
    $('.imgo').attr('src', 'goodlooking-image.jpg'); 
});

这使得更多的意义，如果你例如使用的img标签与数据 - [X]属性持有SRC（或其他属性），你想申请以后。这里是修改“srcset”和代替SRC“大小”的一个示例：

<img src="blurry-preview.jpg" alt="something" class="imgo" data-srcset="m.jpg 300w, l.jpg 600w" data-sizes="(max-width: 500px) 100vw, (max-width: 1000px) 33vw, 600px" />

的Javascript使用来自它的数据改变图像标记的数据 - [X]的属性（修改srcset /尺寸而非SRC，按您的请求）：

$(document).ready(function() { 
    $('.imgo').each(function() { 
     $this = $(this) 
     $this.attr('srcset', $this.data('srcset')); 
     $this.attr('sizes', $this.data('sizes')); 
    }); 
});

来源

2015-11-03 15:36:51 Culme

任何方法来使这与srcset兼容？ –

@JohnDoe使用其他属性而不是'src'，它在分析时会使图像加载。 E.，使用'data-src'并在页面加载'$（window）.on（'load'，function（）{$（'img [data-src]'）。each（function（）{this.src = this.dataset.src;}）;}）;' –

@John Doe，是的，如果你愿意，你可以在加载完成后操作图像的srcset和sizes属性。在Chrome中进行测试，即使它们是动态添加的，它似乎也会应用这些属性。在JQuery $（document）.ready（...）中，并且最初不存在。 – Culme

您可以将图像加载到文档上准备就绪。如下所示：

$(document).ready(function() { 
// set images here 
});

您需要在文档就绪功能中更新图像的src属性。

来源

2015-11-03 15:37:17

推迟img加载，直到页面加载后？

回答

相关问题