優先的にアセットを読み込む方法

ページを読み込む際に、javascriptなどで読まれている画像が読み込まれてない場合もあります。例えば、ホバーイベントで画像が出て来るか変わる仕組みであれば、初回表示させる時にファイル読み込みを待たないといけません。読み込む際に一瞬画像が無くなるので、ユーザーさんが「あれ?」となりそうです。

そのための2つの対策を紹介させていただきます。

 

linkタグを利用すること

 

もしその画像を同じでページで後回しに使う前提だとしたら、HTMLにlinkタグを追加することが出来ます。

<link href='images.jpg' rel='preload'>

 

relの属性はpreloadとprefetchもあります。なるべく早く読み込みたい場合は、preloadを使う、優先度が低いのものはprefetchでいいと思います。

これで上記の問題を解決出来ます。このやり方でいくと簡単に出来ますし、HTMLのみで対応出来ますが、synchronous(終わるまでにコンテンツのレンダリングをブロックする)なので、asyncronousの方法でやりたい方にはもう一つ。

 

遅延読み込み

 

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var link = document.createElement('link');
    link.rel = 'jpg';
    link.href = url;
  }
};
xhr.send();

 

おまけ

 

いろいろな読み込みたいファイルがあると、上のやり方だと、ファイルタイプ別、それぞれの関数が必要になります。一つの関数だけでどんなファイルでも読み込めるようにできる方法も紹介致します。

function loadAsset (asset) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.returnType = asset.type;
        xhr.onload = function () {
            var link = document.createElement('link');
            link.rel = asset.rel;
            link.href = asset.url;
            document.head.appendChild(link);
            resolve();
        };
        xhr.onerror = reject;
        xhr.open('get', asset.url);
        xhr.send();
    });
}
document.body.onload = function() {
    var assets = [
        {url:'image.png',type:'image',rel: 'png'},
        {url:'image.jpg',type:'image',rel: 'jpg'},
        {url:'image.gif',type: 'image',rel: 'gif'},
        {url:'font.css',type: 'text',rel: 'stylesheet'}
    ];
    assets.forEach(function(asset){
        loadAsset(asset);
    });
}

 

これで画像がスムーズに表示され、違和感のないユーザー体験が提供できればと思います。