Jak by jste udělali background image, když má 5000px?

18. 11. 2012 07:15:03

Zdravim komunitu,

řeším teď problém. Máme vcelku velký background image, přesněji něco kolem 5000px, šířka je 1920px. Šířka ok, to neberu, ale ta výška.

Jedná se o onepage příběhovou stránku, tzn. že vše musí být na jedný straně.

Osobně mě napadá řešení takový že background rozřežu dejme tomu po 500px a pak přes jQuery to budu načítat podle scrollování po webu.

A druhá možnost, kterou mi kdosi poradil na stackoverflow, je udělat jeden background s horší kvalitou, kterej se načte rychle, ale nebude nic moc a pak nechat dotáhnout celej background v plný kvalitě.

Jak by jste to osobně řešili? Díky za vaše rady

18. 11. 2012 07:15:03

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832637

Ing. Josef Vrba

(7 hodnocení)

18. 11. 2012 09:14:03

Možná kombinace. Jeden kompletní v nízké kvalitě a pak postupně dotahávat proužky ve vyšší kvalitě.

Jinak neřeší postupné zobrazení při pomalém stahování progresivní ukládání?

18. 11. 2012 09:14:03

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832636

800XE

(8 hodnocení)

18. 11. 2012 09:26:05

Jinak neřeší postupné zobrazení při pomalém stahování progresivní ukládání?

Sice řeší, ale to načítání pak působí dost hnusně.

Jeden kompletní v nízké kvalitě a pak postupně dotahávat proužky ve vyšší kvalitě.

Viděl bych to stejně. Použil bych na to nějaký lazy loading skript a trigger nastavil třeba 200px před tím, než na obrázek uživatel doscrolluje, aby měl dost času se načíst a nepůsobilo to rušivě.

PS: Můžeš ten obrázek ukázat?

18. 11. 2012 09:26:05

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832635

David Musil

(69 hodnocení)

18. 11. 2012 10:19:16

Využiji toto vlákno s dovolením také pro svůj dotaz. Pokud bych obrázek na pozadí rozdělil vertikálně třeba na 5 částí po 1000px a poté stránku rozdělil také vertikálně na několik DIVů, kde bych pomocí CSS background-image: dal na pozadí tento obrázek, tak se mi bude po načtení stránky načítat všech pět obrázků, nebo jen ten první horní, který je aktuálně vidět?

Zřejmě by se načítaly hned všechny, že ano?

18. 11. 2012 10:19:16

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832634

Tomáš

(27 hodnocení)

18. 11. 2012 10:27:31

Napsal musil.david;871471
Využiji toto vlákno s dovolením také pro svůj dotaz. Pokud bych obrázek na pozadí rozdělil vertikálně třeba na 5 částí po 1000px a poté stránku rozdělil také vertikálně na několik DIVů, kde bych pomocí CSS background-image: dal na pozadí tento obrázek, tak se mi bude po načtení stránky načítat všech pět obrázků, nebo jen ten první horní, který je aktuálně vidět?
Zřejmě by se načítaly hned všechny, že ano?

ano

18. 11. 2012 10:27:31

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832633

800XE

(8 hodnocení)

18. 11. 2012 11:05:28

Využiji toto vlákno s dovolením také pro svůj dotaz. Pokud bych obrázek na pozadí rozdělil vertikálně třeba na 5 částí po 1000px a poté stránku rozdělil také vertikálně na několik DIVů, kde bych pomocí CSS background-image: dal na pozadí tento obrázek, tak se mi bude po načtení stránky načítat všech pět obrázků, nebo jen ten první horní, který je aktuálně vidět?
Zřejmě by se načítaly hned všechny, že ano?

Jo, načítaly by se hned všechny. Všechny lazy load pluginy co znám, řeší jenom načítání obrázků, tak jsem napsal vlastní na načítání pozadí elementů. Zatím testováno jenom v Chrome, ale mělo by to běžet všude.

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8" />        <script src="jquery.js"></script>        <script>            (function($) {                var elements = [];                var $window = $(window);                var offset = 0;                $.fn.lazy = function(_offset) {                    offset = _offset || 0;                    this.each(function() {                        var $element = $(this);                        elements.push({                            $element: $element,                            background: $element.data('background'),                            top: $element.offset().top                        });                    });                    $window.trigger('scroll');                };                $window.on('scroll', function() {                    if (!elements.length)                        return;                    var top = $window.scrollTop() + $window.height() + offset;                    var cache = elements.slice();                    $.each(cache, function(id, element) {                        if (element.top <= top) {                            element.$element.css('background', element.background);                            elements.splice(id, 1);                        }                    });                });             })(jQuery);        </script>        <script>            $(function() {                $('').lazy();            });        </script>        <style>            body {                margin: 0;            }                        div {                height: 1000px;            }        </style>    </head>    <body>        <div data-background="url(pattern1.png)"></div>        <div data-background="url(pattern2.png)"></div>        <div data-background="url(pattern3.png)"></div>        <div data-background="url(pattern4.png)"></div>        <div data-background="url(pattern5.png)"></div>    </body></html>

Jako parametr funkce $.lazy() je možné předat počet pixelů, o které se bude pozadí načítat dopředu, ještě než se na něj doscrolluje.

18. 11. 2012 11:05:28

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832632

Macecha

(17 hodnocení)

18. 11. 2012 11:46:41

jakou to má velikost? mě příjde blbost mít background větší než 2MB i přes tyto rozměry... ale zase se píše rok 2012 a internetové připojení je někde jinde kromě mobilních sítích.

18. 11. 2012 11:46:41

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832631

domain

(96 hodnocení)

18. 11. 2012 12:26:24

Napsal clant;871455
Jedná se o onepage příběhovou stránku, tzn. že vše musí být na jedný straně.

cely pribeh zmenseny aby se vesel na stranku

jako css galerie

zadny javascript

pri pohybu mysi se dany obrazek zvetsi

18. 11. 2012 12:26:24

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832630

800XE

(8 hodnocení)

18. 11. 2012 12:43:18

cely pribeh zmenseny aby se vesel na stranku
jako css galerie
zadny javascript
pri pohybu mysi se dany obrazek zvetsi

Jak to řeší problém s načítáním velkého množství dat najednou?

18. 11. 2012 12:43:18

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832629

domain

(96 hodnocení)

18. 11. 2012 12:46:14

Napsal 800XE;871510
Jak to řeší problém s načítáním velkého množství dat najednou?

neni to uplne najednou

protoze kazdy je samostatny soubor

a pokud to neresi

tak je problem neresitelny

18. 11. 2012 12:46:14

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832628

800XE

(8 hodnocení)

18. 11. 2012 12:55:44

Jestli to myslíš jako příběh rozdělit do úseků a při najetí myší daný úsek zvětšit, pak dejme tomu. Na začátku ovšem počet requestů vzroste o počet úseků, což při 5000x1920 nemusí být zrovna málo. Taky by mě zajímala realizace bez JavaScriptu, nedokážu si to dost dobře představit. Leda že by třeba úseky byly napozicovány absolutně a při hoveru se změní background-image, rozměry a pozice, ale z uživatelského hlediska mi to nepřipadá jako nejlepší řešení.

a pokud to neresi tak je problem neresitelny

Nahoře máš řešení hned několik ;-)

18. 11. 2012 12:55:44

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832627

domain

(96 hodnocení)

18. 11. 2012 13:00:37

Napsal 800XE;871518
Jestli to myslíš jako příběh rozdělit do úseků a při najetí myší daný úsek zvětšit, pak dejme tomu.

ano

funguje to

a to i kdyz vypnes javascript

ale jinak cele zadani je trochu nejasne

proc tam pise background?

co bude pred nim?

18. 11. 2012 13:00:37

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832626

800XE

(8 hodnocení)

18. 11. 2012 13:06:49

ale jinak cele zadani je trochu nejasne
proc tam pise background?
co bude pred nim?

No před ním zřejmě nemá být nic. Jestli to chápu správně, pak to má být jeden velký obrázek, kterým se dá scrollovat do všech stran a k tomu možná nějaká hlavička/patička.

funguje to a to i kdyz vypnes javascript

Vzhledem k mizernému uživatelskému komfortu, složitosti realizace(oproti JS řešení) a velkému počtu http requestů, které samy o sobě můžou stránku zpomalit víc, než načtení celého obrázku najednou, mi výhoda v podobě funkčnosti bez JS(což se týká míň než 1% uživatelů), přijde zanedbatelná.

18. 11. 2012 13:06:49

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832625

domain

(96 hodnocení)

18. 11. 2012 13:11:25

Napsal 800XE;871520
No před ním zřejmě nemá být nic. Jestli to chápu správně, pak to má být jeden velký obrázek, kterým se dá scrollovat do všech stran a k tomu možná nějaká hlavička/patička.

ale aspon vidis jak je zmateny

chce background a nepotrebuje backgound

mozna ani neni nutne aby to vsechno bylo vedle sebe

jinak scrollovat neni vubec user-friendly

18. 11. 2012 13:11:25

https://webtrh.cz/diskuse/jak-by-jste-udelali-background-image-kdyz-ma-5000px/#reply832624

800XE

(8 hodnocení)

18. 11. 2012 13:17:34