Jaka jest najlepsza alternatywa dla przestarzałego Lowsrc do obrazów?

Chciałbym użyć lowsrc z tagiem img, aby pokazać obraz o niskiej rozdzielczości najpierw (i szybciej) podczas ładowania obrazu o większej rozdzielczości.Jaka jest najlepsza alternatywa dla przestarzałego Lowsrc do obrazów?

Moje obrazy w dużej rozdzielczości to @ 800 KB i wersje o niskiej rozdzielczości na 50 KB.

Biorąc pod uwagę, że lowsrc został uznany za przestarzały, a wiele przeglądarek go nie obsługuje, szukam rozwiązania, które działa tak samo, najlepiej z tak małym kodem, jak to tylko możliwe.

Czy istnieje dobry zamiennik dla Lowsrc?

Źródło

2014-11-28 Bill Noble

Użyj obrazu o niskiej rozdzielczości jako src i zamień go na src. – Jamiec

<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">

Źródło

2014-11-28 15:02:02

To działa przyjemność! Tak proste. Dzięki. –

@BillNoble nie ma problemu! –

To rozwiązanie działa dobrze, z tą różnicą, że powoduje nieskończoną pętlę żądającą w Firefoksie, ponieważ powoduje, że zdarzenie onload jest ponownie uruchamiane po zapisaniu src. Naprawiłem to przez dodanie '; this.onload = new Function();' na końcu. – Ultimater

Mam dwie (trzy w przyszłości) rozwiązania:

czystym CSS. Działa, jeśli masz tylko jeden obraz zastępczy dla wszystkich ładowanych obrazów. Wystarczy dołączyć tło dla tych obrazów, które mają właściwość [lowsrc] i określić minimalną wysokość.
Użyj niektórych JS, aby ustawić tło. Zobacz poprawkę http://codepen.io/anon/pen/yyQdYJ i ustaw <body onload>.
Przyszłość. Obecnie nie działa (2015). Podobne do # 2, ale używając attr() CSS function można ustawić tło na wartość [lowsrc].

Wszystkie te rozwiązania działają z tłem, który nie pozwala określić prawidłowej wysokości obrazu zgodnie z wysokością tła.

// Not working yet 
img[lowsrc] { 
    width: 100%; 
    min-height: 10em; 
    background-image: attr(lowsrc); 
}

Mogli przechowywane [lowsrc] pracy: -/

Źródło

2015-03-18 15:12:34 Slawa

W3C zalecenie określające HTML5 ma listę obsolete, nonconforming features, w tym atrybucie lowsrc. Zaleca się utworzenie progresywnego obrazu JPEG, którego pierwszy skan ma taki sam poziom szczegółów przestrzennych, jak obraz o wielkości 50 kB, a późniejsze skany wypełniają dodatkowe szczegóły w pełnym obrazie 800 kB. Mechanizm ten prawdopodobnie wymaga, aby aplikacje użytkownika używały żądań zasięgu HTTP w celu określenia ilości danych do pobrania w stosunku do rozmiaru, przy którym obraz jest wyświetlany, tak jak używają żądań zakresu do wyszukiwania przez źródło elementu audio lub video.

Źródło

2015-12-08 18:53:43

Jaka jest najlepsza alternatywa dla przestarzałego Lowsrc do obrazów?

Odpowiedz

Powiązane problemy