이것은 일반적인 문장과 약간 다른 게시물입니다. 보통 브라우저에서 이미 실현되었거나 최근에 규범에 추가된 내용을 이야기합니다. 오늘날, 나는 여전히 규범에 통합되기를 기다리고 있습니다.
나는 이것이 너로 하여금 규범이 어떻게 시간의 추이에 따라 발전하는지 더욱 잘 이해하게 할 뿐만 아니라, 동시에 너로 하여금 자신의 개선 건의를 제기할 자신감을 가지게 할 수 있기를 바란다.whatwg팀은 새로운 아이디어를 기꺼이 듣는다.

W3 오류 보고

우리의 이야기는 2012년부터 시작되었다.BBC 네트워크 팀의 Josh는 이 오류를 w3 website 에 발표했다.

The BBC updated their BBC News mobile website, recently. One of the ways they optimised it for mobile devices was by deferring loading images until after the page has loaded.

I haven't looked into how this is done in detail, but they used DIVs for placeholders in the positions where the images will go. For example:

<div class="delayed-image-load" data-src="http://static.bbci.co.uk/news/200/media/images/59388000/jpg/_59388680_59388679.jpg"></div>

After the page has loaded, the DIV is changed into an IMG element.

Clearly, this isn't very semantic, and wouldn't work at all if JavaScript is disabled. But they have a good reason for doing this, which is why I believe there is a need for a way of deferring the loading of images until after the page has been parsed. This could also be applied to other embedded content elements, like IFRAME and OBJECT.

The way I think this should be done is by using the DEFER attribute, which would work in the same way as it does in the SCRIPT element.

이 문제를 해결하기 위해 그들은 <img> 속성이 있는 defer 표시를 원한다. 이 속성은 사이트가 ready 이전에는 그림을 렌더링하지 않을 것이다.

<img src="https://via.placeholder.com/150" defer />

이렇게 하면 이미지가 처음 그려질 때까지 로드되어 사이트가 더 빨리 로드되는 것처럼 보입니다.

GitHub 질문

몇 년 후 이 대화는 시대에 뒤떨어졌지만 2017년 조쉬는 GitHub에서 다시 한 번 이 점을 언급했다.

뷰포트에 표시될 때까지 이미지나 객체 다운로드 차단 #2806

JoshTumath
발표 날짜 Jul 01, 2017

See PR #3752

문제

많은 사이트의 사진량은 매우 많지만, 모든 이 사진들이 방문자에게 보이는 것은 아니다.특히 모바일 장치에서는 대부분의 방문자가 아래로 스크롤하지 않는다.주로 페이지 맨 위의 내용이 소비된다.페이지 아래의 대부분의 이미지는 영원히 볼 수 없지만 어쨌든 다운로드될 것입니다.
이것은 전체 페이지의 불러오는 시간을 늦추고 일부 방문자의 이동 데이터 비용을 불필요하게 증가하며 메모리의 데이터 양을 증가시킨다.

예제 해결 방법

여러 해 동안 BBC 뉴스팀은 이 문제를 해결하기 위해 다음과 같은 방법을 사용해 왔다.페이지 상단의 기본 이미지는 HTML 문서에 일반적인 방식으로 사용됩니다 img.그러나 다른 그림은 스크립트를 통해 천천히 불러옵니다.이러한 이미지는 HTL 문서에 자리 표시자div로 개별적으로 포함됩니다.div CSS 디자인으로 사이즈는 로드된 이미지와 같고 배경은 회색이며 위에 BBC 로고가 있습니다.

<div class="js-delayed-image-load"
     data-src="https://ichef.bbci.co.uk/news/304/cpsprodpb/26B1/production/_96750990_totenhosen_alamy976y.jpg"
     data-width="976" data-height="549"
     data-alt="Campino of the Toten Hosen"></div>

Eventually, a script will replace it with an img element when it is visible in the viewport.

Doing this with a script is not ideal, because:

1. If the visitor has scripts disabled, or the script fails to load, the images won't ever appear
2. We don't know in advance the size of the visitor's viewport, so we have to arbitrarily determine which images to load in lazily. On a news article, vistors on small viewports will only initially see the News logo and an article's hero image, but larger viewports will initially be able to see many other images (e.g. in a sidebar). But we have to favour the lowest common denominator for the sake of mobile devices. This gives users with a large viewport a strange experience where the placeholders appear for a second when they load the page.
3. We have to wait for the script to asyncronously download and execute before any placeholders can be replaced with images.

솔루션

There needs to be a native method for authors to do this without using a script.

One solution to this is to have an attribute for declaring which images or objects should not be downloaded and decoded until they are visible in the viewport. For example, <img lazyload>.*

Alternatively, a meta element could be placed in the head to globally set all images and objects to only download once they are visible in the viewport.

* An attribute with that name was proposed in the Resource Priorities spec a few years ago, but it didn't prevent the image from downloading - it just gave a hint to the browser about the ordering, which is probably not as useful in a HTTP/2 world.

Josh's idea had changed a little but the principle remained the same. Rather than a defer attribute, a lazyload attribute would be used the intention would be to only load images in the viewport.