web-dev-qa-db-ja.com

非同期で画像を読み込む

次のような画像タグがある場合：

<img src="myimage.jpg" />

「非同期」を追加すると：

<img async src="myimage.jpg" />

画像は非同期にロードされますか？

html5imageasynchronous
27
amateur

コンテンツを非同期ロード（遅延ロード）する方法は、「src」属性を設定せずに、DOM対応が起動したらイメージをロードするスクリプトを実行することです。

 <img data-lazysrc='http://www.amazingjokes.com/images/20140902-amazingjokes-title.png'/>

jQuery（またはプレーンJavaScriptでも可能）では、以下のコードを使用します（提案通り here）：

<script>  
function ReLoadImages(){
    $('img[data-lazysrc]').each( function(){
        //* set the img src from data-src
        $( this ).attr( 'src', $( this ).attr( 'data-lazysrc' ) );
        }
    );
}

document.addEventListener('readystatechange', event => {
    if (event.target.readyState === "interactive") {  //or at "complete" if you want it to execute in the most last state of window.
        ReLoadImages();
    }
});
</script>
29
patrick
<img async src="myimage.jpg" />

画像タグは、非同期属性をサポートしていません。

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

6
mpm

JQueryを使用している場合は、次のようにシンプルでありながら効果的なことを行いました。

[〜＃〜] html [〜＃〜]

<div data-lazy-load-image="/Images/image-name.png" data-image-classname="pop-in"></div>

JavaScript

$(function () {
    $("[data-lazy-load-image]").each(function (index, element) {
        var img = new Image();
        img.src = $(element).data("lazy-load-image");
        if (typeof $(element).data("image-classname" !== "undefined"))
            img.className = $(element).data("image-classname");
        $(element).append(img);
    });
});

[〜＃〜] css [〜＃〜]

@-webkit-keyframes pop-in {
    0% { opacity: 0; -webkit-transform: scale(0.5); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
    0% { opacity: 0; -moz-transform: scale(0.5); }
    100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

これを拡張して各画像の追加のオプション属性を含めることもできますが、アイデアは得られます。

これは、DOMの準備ができるまで待機してから、data-lazy-load-image属性でマークした要素に画像を動的に（非同期で）ロードします。 CSSを含めて、画像が読み込まれたときに「ポップイン」します。

3
John Washam

ここでJqueryまたはいくつかのlibraryを使用して、この単純なタスクを実行するだけで多くの回答が表示されます。これは、JavaScriptでPromiseを使用して行うことができます。

function asyncImageLoader(url){
    return new Promise( (resolve, reject) => {
        var image = new Image()
        image.src = url
        image.onload = () => resolve(image)
        image.onerror = () => reject(new Error('could not load image'))
    })
}    

// then use it like this

var image = asyncImageLoader(url)


image.then( res => {
    console.log(res)
})
3
anekix

@Norguardの例は、1つまたは2つのイメージに対して非常にシンプルで簡単ですが、echo.jsは遅延読み込み、 https://github.com/toddmotto/echo に非常に便利であることがわかりました。

Data- *属性を使用して画像を遅延読み込みし、他にもきちんとした機能をいくつか備えています。

<img data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
    echo.init();
</script>
3
Victor Häggqvist

JQueryで次のアプローチを使用しました。

まず、画像タグで「src」属性を使用せずに、次のようにソースを別の属性に配置します。

<img async-src="/mydirectory/myimage.jpg" />

次に、jQuery document-ready関数内で、このコードを使用して要素のasync-srcを要素の実際のsrcにコピーします。

$("img[async-src]").each(function(index) {
    $(this).attr("src", $(this).attr("async-src"));
});

ノート：

jQueryの.each関数は、HTML/DOMでコーディングされた順序でタグを処理できますが、画像のサイズとネットワークの問題は、画像が実際にはload連続しないことを意味する場合があります。つまり、3番目のasync-srcイメージは、最初の読み込みが完了する前に画面に視覚的に表示される場合があります。

ページレイアウトがその画像ファイルのピクセルサイズに依存している場合-タグ属性、CSS、または親要素を介して画像のサイズを定義するのではなく、元のファイルで「src」属性を使用して、必要なサイズの空白の白またはクリアGIFを指す必要があります。

最後に、イメージの非同期読み込み後にコードを処理する場合（たとえば、フェード効果を処理したり、要素に関連するCSSタグを変更したりする場合）、次のようにjQueryを展開します。

$("img[async-src]").each(function(index) {
    $(this).load(function() {
        // code to run after loading
    });
    $(this).attr("src", $(this).attr("async-src"));
});
1
Deke

他のいくつかの答えは、画像を非同期に取得する方法を強調していますが、<img />タグは、ブラウザに対してhintとして機能する属性をサポートしますmay画像が非同期的にデコードされます。 Internet Explorerでサポートされていないようです。

<img src="myimage.jpg" decoding="async"/>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-decoding

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding

https://github.com/whatwg/html/issues/192

0
derekbaker783

Lazyload属性について詳しく読むことができます：

<img src="myimage.jpg" alt="some description" lazyload/> - with default values

または、優先順位を付けることができます。

<img src="myimage.jpg" alt="some description" lazyload="1"/>
<img src="myimage.jpg" alt="some description" lazyload="2"/>
0
Miroslav Šiška