大きなサイズの画像がたくさん含まれるページを作成しているので、問題なくページが読み込まれるようにしたいと思います。私はこの記事をここで読みます http://24ways.org/2010/speed-up-your-site-with-delayed-content
延期の方法は次のとおりです(ページからプルされ、URLは気にしません)
<div>
<h4>
<a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48">
Drew McLellan
</a>
</h4>
</div>
その後、jsのスニペットが画像の読み込みを処理します
$(window).load(function() {
$('a[data-gravatar-hash]').prepend(function(index){
var hash = $(this).attr('data-gravatar-hash')
return '<img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&gravatar_id=' + hash + '">'
});
});
すべての画像に対してこれを実行する予定はありませんが、ページのロード時に表示する必要のない一部の画像については間違いありません。
これは最善の方法ですか、それとも画像を延期してページの読み込みを高速化する方法がありますか?
ありがとう
少し遅れますが、他の人にメリットがある場合のために、このトピックに関するPatrick Sextonのすばらしい記事 https://varvy.com/pagespeed/defer-images.html があります。
彼は基本的に同じことを提案しており、base 64でエンコードされた小さな画像を使用するだけで、画像タグをHTMLに直接配置できるため、高さ、幅、altなどの属性を個別に制御できるという利点があります。スクリプトでイメージタグ全体を作成するよりも、この方法でHTMLを維持する方がはるかに簡単です。
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image2.jpg" alt="image 2">
次に、スクリプトはすべての画像に対してシンプルで汎用的です
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
</script>
これは、画像を延期するかなりクリーンな方法のようです。唯一の潜在的な問題は、「データ属性はHTML5の新機能」として重要な情報が画像に含まれる場合です。
別のオプションは、画像を本文の最後に配置し、CSSを使用してそれらを配置することです。個人的には、javascriptを使用します。
.querySelectorAll
を表示するバージョンは次のとおりです。
function swapSrcAttributes(source) {
return function(element) {
element.setAttribute('src', element.getAttribute(source));
}
}
function forEach(collection, partial) {
for (var i = 0; i < collection.length; i++) {
partial(collection[i]);
}
}
function initDeferImages() {
// for images
var deferImages = document.querySelectorAll('img[data-src]');
// or you could be less specific and remove the `img`
deferImages = document.querySelectorAll('[data-src]');
forEach(deferImages, swapSrcAttributes('data-src'));
}
window.onload = function() {
initDeferImages();
}
これは.querySelector
と.querySelectorAll
の互換性表です https://caniuse.com/#feat=queryselector