45

次のような画像タグがあるとします。

<img src="myimage.jpg" />

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

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

画像は非同期でロードされますか?

4

11 に答える 11

47

コンテンツを非同期ロード (遅延ロード) する方法は、'src' 属性を設定せず、DOM 対応が起動されたら画像をロードするスクリプトを実行することです。

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

そしてjQuery（またはプレーンなJavaScriptでも可能）では、以下のコードを使用します（ここで提案されているように）：

<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>
于 2016-05-24T11:15:47.457 に答える
32 
var img = new Image(),
    url = "myimg.jpg",
    container = document.getElementById("holder-div");

img.onload = function () { container.appendChild(img); };
img.src = url;

これにより、スクリプト内で要求するとすぐに画像の読み込みが開始され、画像の読み込みが完了するたびに、画像が取得されて追加されます。

これを行う方法は他にもたくさんあります...
これは、単一の画像の非同期読み込みの非常に単純な例です。

しかし、教訓は次のとおりです
。非同期読み込みを機能させるには、JavaScript で読み込み、onload を使用するか、src属性なしでページに画像タグを含め ( HTML でwidthandheightを指定します)、ある時点で戻ります。 JS、画像の URL を設定します。

于 2013-04-14T14:56:46.873 に答える
10

画像を非同期でロードするもう 1 つの方法は Promise、JavaScript を使用することです。これは、非同期で処理する目的に役立ちます。

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)
})
于 2018-10-25T06:21:03.267 に答える
8 
<img async src="myimage.jpg" />

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

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

于 2013-04-14T13:57:05.170 に答える
3

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 を含めました。

于 2016-01-29T17:41:17.250 に答える
2

@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>
于 2016-01-02T23:47:55.880 に答える
1

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

まず、画像タグで「src」属性を使用しないでください。ただし、次のように、ソースを別の属性に入れます。

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

次に、jQuery ドキュメント対応関数内で、次のコードを使用して要素の async-src を要素の実際の src にコピーします。

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

ノート：

jQuery の .each 関数は、HTML/DOM でコーディングされている順序でタグを処理する場合がありますが、画像のサイズとネットワークの問題により、実際には画像が順番に読み込まれない場合があります。つまり、最初の async-src イメージの読み込みが完了する前に、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"));
});
于 2019-04-26T19:06:46.020 に答える