From c4164649496d3b1b3ffa8b6b01b750903a0edffd Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Wed, 1 Dec 2021 18:05:25 +0100 Subject: [PATCH 1/2] [fix] lazy loading of tags MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Images should include dimension attributes. Without `width` and `height` specified, image dimensions are 0×0 pixels at first. ... In this case the browser determines that all of them are visible to the user and decides to load everything [1]. In CSS the `width` is set to a value and the `height` is unsed to scale the image proportional in both dimensions. [1] https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes [2] https://caniuse.com/loading-lazy-attr Signed-off-by: Markus Heiser --- searx/static/themes/simple/src/less/style.less | 1 + searx/templates/simple/macros.html | 4 ++-- searx/templates/simple/result_templates/images.html | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 5e015579c..bb983838b 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -267,6 +267,7 @@ article[data-vim-selected].category-social { float: left; padding: 0.6rem 1rem 0 0; width: 20rem; + height: unset; // remove heigth value that was needed for lazy loading } &.image { diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html index 3920da2b3..c1c421ab1 100644 --- a/searx/templates/simple/macros.html +++ b/searx/templates/simple/macros.html @@ -23,8 +23,8 @@ {{- part -}} {%- endfor %} {{- result_close_link() -}} - {%- if result.img_src %}{{ result_open_link(result.url) }}{{ result_close_link() }}{% endif -%} - {%- if result.thumbnail %}{{ result_open_link(result.url) }}{{ result_close_link() }}{% endif -%} + {%- if result.img_src %}{{ result_open_link(result.url) }}{{ result_close_link() }}{% endif -%} + {%- if result.thumbnail %}{{ result_open_link(result.url) }}{{ result_close_link() }}{% endif -%}

{{ result_link(result.url, result.title|safe) }}

{%- endmacro -%} diff --git a/searx/templates/simple/result_templates/images.html b/searx/templates/simple/result_templates/images.html index 7e45f028e..e521ee211 100644 --- a/searx/templates/simple/result_templates/images.html +++ b/searx/templates/simple/result_templates/images.html @@ -1,6 +1,6 @@
{{- "" -}} {{- "" -}} - {{ result.title|striptags }}{{- "" -}} + {{ result.title|striptags }}{{- "" -}} {{ result.title|striptags }}{{- "" -}} {{- "" -}}
{{- "" -}} @@ -11,7 +11,7 @@ {%- if result.thumbnail_src -%} {{ result.title|striptags }} {%- else -%} - {{ result.title|striptags }} + {{ result.title|striptags }} {%- endif -%} {{- "" -}}
{{- "" -}} From 715f578cdae8e4129104bfb46bfc972c6a0c546e Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Wed, 15 Dec 2021 10:45:25 +0100 Subject: [PATCH 2/2] [build] /static --- .../oscar/css/logicodev-dark.min.css.map | Bin 11613 -> 11613 bytes searx/static/themes/oscar/js/searxng.js | 8 ++++---- .../static/themes/oscar/js/searxng.min.js.map | Bin 8985 -> 8986 bytes .../themes/simple/css/searxng-rtl.min.css | Bin 56684 -> 56665 bytes .../themes/simple/css/searxng-rtl.min.css.map | Bin 91801 -> 91814 bytes .../static/themes/simple/css/searxng.min.css | Bin 56645 -> 56626 bytes .../themes/simple/css/searxng.min.css.map | Bin 91667 -> 91680 bytes .../themes/simple/js/searxng.head.min.js.map | Bin 2633 -> 2544 bytes .../themes/simple/js/searxng.min.js.map | Bin 88311 -> 88261 bytes 9 files changed, 4 insertions(+), 4 deletions(-) diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css.map b/searx/static/themes/oscar/css/logicodev-dark.min.css.map index 32293f3a43cc80ffe3356a30a41c213dc1fbcf2d..e91363daec81fcb8025009b47b21644bf53a96f1 100644 GIT binary patch delta 65 zcmcZ`bvJ54VM9v5j3D87Ec=OuWN6*?>uDb2XEu0;BWfrAi?3m{J~N(q>cT24=?O K&D+$LvjG5F6BF40 diff --git a/searx/static/themes/oscar/js/searxng.js b/searx/static/themes/oscar/js/searxng.js index d3aef35e3..45272607f 100644 --- a/searx/static/themes/oscar/js/searxng.js +++ b/searx/static/themes/oscar/js/searxng.js @@ -341,7 +341,7 @@ $(document).ready(function(){ (function (w, d) { - function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) { + function ImageLayout (container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) { this.container_selector = container_selector; this.results_selector = results_selector; this.img_selector = img_selector; @@ -376,7 +376,7 @@ $(document).ready(function(){ } } - return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3 + return (width - images.length * this.verticalMargin) / r; // have to round down because Firefox will automatically roundup value with number of decimals > 3 }; ImageLayout.prototype._setSize = function (images, height) { @@ -466,12 +466,12 @@ $(document).ready(function(){ var results_nodes = d.querySelectorAll(this.results_selector); var results_length = results_nodes.length; - function img_load_error(event) { + function img_load_error (event) { // console.log("ERROR can't load: " + event.originalTarget.src); event.originalTarget.src = w.searxng.static_path + w.searxng.theme.img_load_error; } - function throttleAlign() { + function throttleAlign () { if (obj.isAlignDone) { obj.isAlignDone = false; setTimeout(function () { diff --git a/searx/static/themes/oscar/js/searxng.min.js.map b/searx/static/themes/oscar/js/searxng.min.js.map index 0b6317471faedee5323eb0b2f2423d557882fec4..66ba6aa2b4c1c4cbe657895cd9213bb2f97fac47 100644 GIT binary patch delta 35 rcmbQ~Hp^{;og`!8WP3>sM#Ie+l1te+)16A(b=)0Y%QlNDvM>Pv$JGiM delta 34 qcmbQ`Hq&i`og`!AWP3>s#;VO3l1te+QcK)*+#Ov@Hj62;FaZF$k(!yFQDRk^SDae1`TN0AX#f?)55NEb delta 50 zcmcb)i}}qi<_-ND<#H19(n}N5Q+4!8GILYoi-6qJ>hjE#k_;;oQ`ODA8@&WJKRH+` F4FENH6`cS8 diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css.map b/searx/static/themes/simple/css/searxng-rtl.min.css.map index 27ddc3289e96edf27175bfc76ad6354a030db409..18040a87563197e00c21fcea0d0652e97d540f57 100644 GIT binary patch delta 274 zcmbPvmUY=#)(sauCO`G4X3UzL=;_F$9WZ%`rzT_B=5wA4*;t$%b^Ir125jM}3Ubs* zc64;q@%A^{tQokJg(olB4I<*{Z!q~*=oB8ylmM8L%*j<@9Xv&8P!-<(<(v7!Bbj*1 za-87C7;G+ylxE>8DR(Mxg6T7uJU3QH$h6!Et}(p=s3UcmUZS?)(saugdBAu9i3fud>tJfbvzy2-E=}HC+f&fe&dnAToULySx`iLGM|(> zvu}Rjry|HvCmE#8+uvlfeBe?Ro}6Sih=`|u<>U*YQ+Ui% z0$@tgCl`cu@D!v$Re1ZCZe|IOWa2H!ae^CDxj8FRnnkpz+^N6`rmwObC?DwPJo#OK zDxYz=6I{P``Q)>)QH++GHR7I~)yhfCOD|1KPt}RZQ&7+=$;?fSF9HgsDpZ366coxc dQ%W+d6iiH2w=?Q628m71PvG3X%8BuhG5}VYR@49h diff --git a/searx/static/themes/simple/css/searxng.min.css b/searx/static/themes/simple/css/searxng.min.css index 86a173de206460196d7eb9ee72e00ddd42821d5d..8bd106ccfec293481bc8fffd858f420781391997 100644 GIT binary patch delta 33 pcmX@Qi+R&7<_-NDH?QC5A;4>$k(!yFQDRk^SDae1`TIdXX#fk}4@&?5 delta 50 zcmdnAi}~m-<_-ND<#H19(n}N5Q+4!8GILYoi-6qJ>hjE#k_;;oQ`ODA8@&WJKRM_p F4FD!&6(|4z diff --git a/searx/static/themes/simple/css/searxng.min.css.map b/searx/static/themes/simple/css/searxng.min.css.map index 76b490e0cab71c3202256e0c412b71d80e2326dd..11af270e676bf3e93e00d845c9904b77883f276f 100644 GIT binary patch delta 279 zcmbPyhIPRi)(zV|CZG1GX3h$9og611J~_ctgGoDJa+jwjM_HhoPN<`^>tqKn_05kw zi`iJ59d-OC`v+{{sS0w`Np^H})baK=+sq%hl!YfR*$pD%>2EOkKtJfbv!3;@MvN#33QztCm=rA$5VqTKX7uHrzWH6 z<^`S$*(Q4jtmCN&a@0u%Dfad^*~}Wal!YfJ*$pD%>0dc{Tj&%X^OOLXlJv=8VI4dL zX;2m3{-v8=g+(&)mgG3Wjj7xm5Gl>VS5)p)-~`iGIk_@chtIg&39eDQeDmg5wR2iI ziFxUziRr02F?k9KdL@~;sqsZXp;U!xkbr_hd1gvUhLwVesp|GK+KfSB+jE>4wp@@_)=Icf4qX1~eOEOwJ)S*$0|Ve#ZD$ws#o{&Di&amdHYQI&p%!eUf&$Pj zr3FBjq$&VaDkK+!T(OANW^xdl*yL}lB0yT2J*!w9>8nM^9&vNU#ftbamB9b#%;j(g}BT)}L&`Va@0=xqw5AF>G@?hajV{ wzmBt`tB*5CO}dkgk&~l$!Q|DP#f*8A<+&t;ES-ST>CQm2{T&?xvz(M_0VDxpjQ{`u delta 378 zcmew$d{SgXFr%VIxsF1Lrb2a0o&pf4mlmfg6qgibCYPvN$K-(oCl@lxPVQmU;nIMs zn!KOUa`G2OZC(Y1T1^d2m_iLEWl;r%a=qfz#G;D4bOl?Osgt9aawZ>QGM)UH$#1eP zbK2zj%t4diGCNJyX0e}~#^MXqrJzufk(!&TUE{11h;$fo%dKU#O#w ztD~d4vrf8`qi4wEee5!f=96!;TT6K8xI6l0Is1X6UHx?e9UVh;oE@EmHtTT+G71L* z*{)vBI;oD1=}tOEPLAFclY=;mwX>X3K^h{RbwYs}Ty;Dh9X)lz9W9-5oPj#hoq-nl MJ30ntIVsfw0NJE!;Q#;t diff --git a/searx/static/themes/simple/js/searxng.min.js.map b/searx/static/themes/simple/js/searxng.min.js.map index 4bddf933548970cc616e8db0484f8cd759065dab..e2f356472762dd668b4a2359846fd0cb1dde5286 100644 GIT binary patch delta 2556 zcmZ`(eQZJ$xHZH5+1RW08T<^c<;q=9LG2xnBWis#(j=WoR`FQ zLI|{|9iXDN>$=nKw$&&dlaR)?4)&^f-88gy@DFH0AlenRmAa}@r*`c+z8R^yd!Lhv z{V_{E_nmXk`JL~3?_Bo9bJ=Hk9dIhI%LCwWW7ZdxsnQ!6Q=5H}GGApkP)4mZEMYRI z@iL{l+}6V!mynYa@fn%h%tfY^a4I&Ta5c5u!6*1(h0}fsd7m6k{r~&P#Kd?k$p8*6 zns8hyDl4szAcjNn_})->j3PhcF^p$(SC(*GIFt%UA5q6oa-C?)i(vVMLVPywBkjDB zUx-KZ+ZMjB(gfZxHRF3GhpIOVEGt)mh(`+=@U4P(nUYEhvvgQoyajI*J8-7B0Lx1% z@W7#b6iU|P{*o}xKV~#0-m;3)OQjxl$`WLtmr7ZwUM@pQ$Shd?R7ys zSGQjMtnM!i^$g!dt#9(H7-OwpP2)AAyZ%MWypS1i z;u@Sd^};fI(7A<5THG#5pL7rExMuuz$8!8o%)@#2dsKL>%S-7B&ml@*^?Zp1BNlwq zZ`Hc_=kC?`d3P0U10Akm1#R9&?DGl*TupdFNy$noBmTK}3*PeX!r`8TJ~ENu@S~n} zxWqS(=xas$bu*fSCLFqyho3)Pg#6adjMBlaB3|6uPK9~6)E~#mZtMRz-_>qJ?~oP! zt;fUWGm<3>g;&cR<3piPU~sP{|tVrUL7h2hKhH0)?@YXHZ?VT6wuOMi&Z0RPNqhF z$x5{QJf$D(9@SL0?y1I#<{TZzVPa1`zV0^SsXZsOD{si8b!A8Br&<-W_IA^z`SyOG zL+9mb{8r9Z-;j?pkHu=s=xdo)UXONBK_S+~hRs|}jCRwpiHmV9l1=UBm2)&+ z^;gNWW*Ww>r>;@P{`Bfe$DqW!1i>xwqoUB~6nVEGcsiKK<>LDUVSs*0d-(xDpo(rm z+J;AN_80=%cR&8^=4+O)20$g$#-qs`rO-bw8Uj5`X$FJe zRN>q6uP*R&YVaE|+Ys>6OV@1rlnw@9X-r(J8P1Ble=#{t5Fv$ns3=qy-d_a)8(#x{J1o@pAiJwYHV-B=03cO5kCb6c+ADh zm6--Rk@Ml0G1#b;OCh)N;j{11$R{RvXQA74)~LHg`kWaGbe8^Y3}P@uQxk$LWA_}n zRtRG&6=`jkhOT(1KFxhx6r{+wXTc*=C!r#+6h*}dlZ}cp!;OmR?-zjqjDcn^A*LH4=`t82!D6tG4OXbMu|;7ENa?i5dj-MA)a+!;3agC)hmWP`B(GSZA2yIL ztl+eH*^2l)Om|Ql?*OxCAuTr8sk2Mu$2O=i%ynqfLjGWbHPv$+S}J`GZQI>iVLW_@ zZp65s&P7U0kgO%JMmH#tu3}i5-o6C>q%#D%SvgzME0#f}EPS!fT)g8q&|Lfs@AEQE^tQ&rG_>4i{?w3*4(8bpQYW delta 2538 zcmZ`(eQZI|lpt4Ealn<6=f!w=YQ8=J8qXB2;)a|J&%J%syBtH}B>zMi`r zZ|2tHC36?1@~+{Sna6`>J30SRIh0?Z!IK4X4a1;gE{mJyw$be`<_687XnZ6PWl~}w zIUNh3*|Gp@EftE-asbe0apRmK9sbjjkH5F*af5XXe_fJ~XRJ@)GsVl4Jw;|vo+%b{ zly4UbnljrD!jWK@u%G2FO(tXiBNM0?R^F_5QlogPF9BB6yo7(Kc@=jo9>fcamnk{5 zZv&oVJC)M93Zia(C63nb!yWb|*ktb{>kprHoW`?`WyPWtPY}scVzfR!HkJ~l-gttj zjZ8z0;%TsH%58y(_+(7_-Z~sjrTDwXK{Pg1p`%H{mzpA&zqDMjFMS1+&z5OHxzc<# z3tww#!5b~Rar>%HJh`f_h+)EFG~o-xNaA2LkV>r$Oo*+hZEeyGN%V(-)&)j&r=A8{ zpH;qUeGimltE)8lDd$kE{7(Q{@kODB{Qp|`1X`7k+BXA^xaZ;ej^mn!W^8+EJ}z-R zY_v@T62mj`_ynHou;S;gYJAPrj|H9gFyHOLLHBn2z-n$9+9?Zp2ZxSybHQ*b6*5hBjb(m1hsPCFkSE*~IdiVTa zvhn!~b8&X{K9z@cr}MG4GY>!M>cF928L@UPkDFgG;KbV1SbMqvuSWD)J8D|6eA8y5 zZT2bQ;Wcf#3>Ta;un2#=?xf=NoziHj4Zrg7%7A}0;0bFn9`4nah^c5KCNZ&i-DHdi zGg>zlNTyaY4&_YmNiFUj_%w?lgJLRPi1Nmp_|w6a`0ikjQa1EBkVH0ocasn2Z~iU5 zv-vpwXgGxb8m`xnwpMPb&l-|~cz(!&@hyAiKd9}tNGvfa)lUVYlVWRiHU1`4hE0K; z_)4HxF^yc(7-pF$Uygna$`@k?=>*8(PP`l*pJR)(I$D^>D)Pj|P&^qyN3!(k3tCLL zw8~=~&Cd6gyE`ir=01USa-2(GLp;~L6z$jM>xs$52|d_-&8zpT zdmp}d?Kw+8buSda;$FCQ|3cPSVqWAk~Y!W;Eeazqw^Yk!gW0z~q3 zt6?j6*3EGQf>^rlZ$(ZR#RE5L3EG((OrF&4WV<+S9qZ>fKi;{)z_ha9W)a*ks1aA( zD%Xq)xbapCB=OkoT0D7cui3wWLV9M@EaNzQo1s2CZxbKo*zG-#=kK5n8B!AZzd4}Y z$~U*;{yQ#w_|Bj)!iSx-9_{`FfYW{s)18HyKa_+Y8aJ2%!0D~q@a?I@M}mt!nkbI!k5{7=YgNTSh1ZLw`#3jmnpEpxqqU>ZFooW@3fB#00wx z{Y%=Z5>fdL6a4)^Aqm-DT#j{OD03&$tV$s5HC{P7(e#FX(a8N19~v{mwU*iGn^hS z03YPJ)>5Ac&kD5C*XP2)c>#7?J5l?A=?n2}sDl(LKW2eG!h}r`hlKo*1%kOQHOT;p zca6y2LRhTpCL`(WmA4nd!dzEI7K*+>{W_fuLR2uw_E~-m|EEYizG{~T2`k++a*A0c~cNW2J z(DktcoHHh`uK@C?Q8}ocbEzG0Zu3x9{V{>Q)9$D{^WaFT@$}gW*a9#hJF372GwFdU R*l#e1(<);r4R&~|=D&B3My3D&