Html imagini lag, cand se face scroll

#1
bystefu

Posted 02 August 2016 - 22:40

Junior Member

Grup: Members
Posts: 112
Înscris: 26.11.2014

Salut, am incercat de mai multe ori sa fac un template,cu niste imagini pe coloane. Un width de 980px sau chiar 1100, si o serie de imagini cu un aprox. width=180 & height=220.

Afisate una langa cealalta, frumos, stiti la ce ma refer. Ideea este ca ele sunt putin mai mari de rezolutia la care le afisez eu, cu o idee. Am luat modelul de la un site, insa la el e in regula, ceea ce la mine nu. Vreau sa zic ca, avand in vedere ca am imagini mai putine decat ale lui, atunci cand fac un scroll jos-sus, imaginile parca s-ar distorsiona. Parca s-ar alungi si s-ar reface, un fel de lag.

Am salvat pagina, n-are mai mult de 500kb, am validat cu W3, totul e in regula. E pe platforma wordpress + bootstrap, fara alte teme , pluginuri,scripturi,etc.. care ar putea dauna.

Pagina html incepe astfel:

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title><?php wp_title( '|', true, 'right' ); ?></title>
	<?php wp_head(); ?>
   
</head>
<body>

Am facut si testul de viteza,se incarca ok, in maxim 0,80 de secunde. Nu stiu unde gresesc, css-ul sta cam asa:

.item
{
	position:relative;
	float:left;
	width:140px;
	height:200px;
	overflow: hidden;
	margin-right:10px;
	margin-bottom:15px;
}
.item img
{
	width:140px;
	height:200px;
}

Am incercat si cu display-inline, position:relative, etc.. nu s-a schimbat nimic.Iar imaginile le afisez standard <img src="">
Pc-ul n-are cum sa aiba probleme,deoarece am incercat si dupa laptop, unde la ambele am i3,respectiv i5 cu 1 si 2gb Ram.

Aveti vreo idee ce se intampla?Mentionez ca nu e prima data cand am astfel de probleme.
Poate trebuie alfel afisate, sau css-ul nu e bine gandit, ori trebuie adaugat ceva in head... MS !

Back to top

#2
159

Posted 03 August 2016 - 07:24

Senior Member

Grup: Senior Members
Posts: 2,609
Înscris: 22.05.2016

La fel se intampla si pe Firefox?

Back to top

#3
bystefu

Posted 03 August 2016 - 09:33

Junior Member

Grup: Members
Posts: 112
Înscris: 26.11.2014

da, si nu am background fixed sau altceva....

Back to top

#4
maxtron_69

Posted 03 August 2016 - 23:23

Senior Member

Grup: Senior Members
Posts: 2,534
Înscris: 18.08.2010

Price problema de HTML/CSS trebuie postata ca un http://jsfiddle.com ca sa poata fi rezolvata

Ai un link la site/pagina?

E greu de lamurit din ce ai pus tu acolo, bootstrap are CSS ul lui, trebuie vazut ce si cum.

Oricum, parerea mea ca aii pornit prost folosind px pt dimensiunea imaginilor.
Procente pe containere si imaginile responsive inauntrul lor.

Edited by maxtron_69, 03 August 2016 - 23:25.

Back to top

#5
bystefu

Posted 04 August 2016 - 10:12

Junior Member

Grup: Members
Posts: 112
Înscris: 26.11.2014

Multumesc., s-ar putea...Okay, as putea face width=10% , sau ceva de genul, dar cum i proportionez height-ul ? Tot in procente...,eventual acolo sa folosesc un max-height?

Back to top

#6
maxtron_69

Posted 04 August 2016 - 10:46

Senior Member

Grup: Senior Members
Posts: 2,534
Înscris: 18.08.2010

bystefu, on 04 august 2016 - 10:12, said:

Multumesc., s-ar putea...Okay, as putea face width=10% , sau ceva de genul, dar cum i proportionez height-ul ? Tot in procente...,eventual acolo sa folosesc un max-height? Posted Image

Ti-am zis ca ti se va rezolva problema daca pui link catre site sau pui codul intr-un fiddle.
Pt imagini responsive ca prin magie:

img { height: auto; max-width: 100%; }

Si apoi faci o succesiune de div uri care au ce dimensiune vrei tu, 10% etc

Back to top

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

Html imagini lag, cand se face scroll

#1 bystefu Posted 02 August 2016 - 22:40

#2 159 Posted 03 August 2016 - 07:24

#3 bystefu Posted 03 August 2016 - 09:33

#4 maxtron_69 Posted 03 August 2016 - 23:23

#5 bystefu Posted 04 August 2016 - 10:12

#6 maxtron_69 Posted 04 August 2016 - 10:46

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
bystefu

Posted 02 August 2016 - 22:40

#2
159

Posted 03 August 2016 - 07:24

#3
bystefu

Posted 03 August 2016 - 09:33

#4
maxtron_69

Posted 03 August 2016 - 23:23

#5
bystefu

Posted 04 August 2016 - 10:12

#6
maxtron_69

Posted 04 August 2016 - 10:46