15308555518/ website
1
0
Fork 0
mirror of https://github.com/kubesphere/website.git synced 2025-12-26 00:12:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

img lazyload

This commit is contained in:
liuboaibc 2020-06-22 13:39:31 +08:00
parent 8bc63b9bf6
commit e260d29c8d
17 changed files with 107 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/404.html
View File

@ -1,9 +1,9 @@
{{ define "main" }}
<section class="section-1">
<img class="img-1" src="/images/404/combined-shape.svg" alt="">
<img class="img-2" src="/images/404/fill.svg" alt="">
<img class="img-1" data-src="/images/404/combined-shape.svg" alt="">
<img class="img-2" data-src="/images/404/fill.svg" alt="">
<div class="common-layout">
<img src="/images/404/404.png" alt="">
<img data-src="/images/404/404.png" alt="">
<p>{{ i18n "We can’t find the page that you’re looking for :(" }}</p>
<a href="{{ site.Home.RelPermalink }}">
<button>{{ i18n "Go To Home" }}</button>

12
layouts/_default/scenario.html
View File

@ -9,9 +9,9 @@
{{ end }}
<section class="section-img">
<img class="common-layout" src="{{ .Params.image }}" alt="">
<img class="common-layout" data-src="{{ .Params.image }}" alt="">
{{ if .Params.bg }}
<img class="bg" src="{{ .Params.bg }}" alt="">
<img class="bg" data-src="{{ .Params.bg }}" alt="">
{{ end }}
</section>
@ -35,7 +35,7 @@
</ul>
{{ end }}
</div>
<img src="{{ .image }}" alt="">
<img data-src="{{ .image }}" alt="">
</li>
{{ end }}
</ul>
@ -45,8 +45,8 @@
<section class="section-3">
{{ with .Params.section3 }}
<img class="bg-left" src="{{ .bgLeft }}" alt="">
<img class="bg-right" src="{{ .bgRight }}" alt="">
<img class="bg-left" data-src="{{ .bgLeft }}" alt="">
<img class="bg-right" data-src="{{ .bgRight }}" alt="">
<div class="common-layout">
<h2 class="title-black-h2">{{ .title }}</h2>
{{ if .videoLink }}
@ -60,7 +60,7 @@
allowfullscreen>
</iframe>
{{ else }}
<img src="{{ .image }}" alt="">
<img data-src="{{ .image }}" alt="">
{{ end }}
<p class="common-p">{{ .content }}</p>
<a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>

4
layouts/blogs/list.html
View File

@ -17,13 +17,13 @@
{{ range .Data.Pages }}
<li data-tag='{{ .Params.tag }}'>
<div class='img-div'>
<img src="{{ .Params.snapshot }}" alt="">
<img data-src="{{ .Params.snapshot }}" alt="">
</div>
<div class='content-div'>
<p class='time'>{{ .Params.createTime }}</p>
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<div class='author'>
<img src="" alt="">
<!-- <img src="" alt=""> -->
<span>{{ .Params.author }}</span>
</div>
<p class='summary'>{{ substr .Summary 0 120 }}</p>

8
layouts/case/list.html
View File

@ -15,7 +15,7 @@
<ul class="cases-ul common-layout">
{{ range .caseList }}
<li>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
<p class="title-p">{{ .content }}</p>
<div>
<a class="common-green-a" href="{{ .link }}">{{ $tip }}</a>
@ -23,7 +23,7 @@
</li>
{{ end }}
</ul>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
{{ end }}
</section>
@ -42,7 +42,7 @@
{{ $name := .name }}
{{ range .children }}
<li data-name="{{ $name }}">
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
</li>
{{ end }}
{{ end }}
@ -51,7 +51,7 @@
<p>{{ .content }} <a class="common-green-a" href="{{ .link }}">{{ .linkContent }}</a></p>
{{ end }}
</div>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
{{ end }}
</section>
<script>

8
layouts/case/single.html
View File

@ -14,7 +14,7 @@
<div class="common-layout">
<div>
{{ with .rightPart}}
<img src="{{ .icon }}" alt="">
<img data-src="{{ .icon }}" alt="">
<ul class='ul-right'>
{{ range .list }}
<li>
@ -40,7 +40,7 @@
<div>
<p class='p1'>{{ .content }}</p>
<p class='p2'>{{ .author }}</p>
<img src="/images/case/ic-quote-right.svg" alt="">
<img data-src="/images/case/ic-quote-right.svg" alt="">
</div>
{{ else }}
<h2>{{ .title }}</h2>
@ -48,14 +48,14 @@
<p>{{ .content }}</p>
{{ end }}
{{ if .image }}
<img src="{{ .image }}" alt="">
<img data-src="{{ .image }}" alt="">
{{ end }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<img src="/images/common/hexagon.svg" alt="">
<img data-src="/images/common/hexagon.svg" alt="">
{{ end }}
</section>
{{ end }}

6
layouts/conferences/list.html
View File

@ -8,10 +8,10 @@
{{ range .Params.list }}
<li>
<div class='top-div'>
<img class='left-img' src="{{ .bg | relURL }}" alt="">
<img class='left-img' data-src="{{ .bg | relURL }}" alt="">
<h3>{{ .name }}</h3>
<p>{{ .content }}</p>
<img class='right-img' src="{{ .icon | relURL }}" alt="">
<img class='right-img' data-src="{{ .icon | relURL }}" alt="">
</div>
<ul>
{{ range .children }}
@ -21,7 +21,7 @@
<p>{{ .summary }}</p>
<div class='line'></div>
<a href="{{ .link }}"><button>{{ $viewDetail }}</button></a>
<img src="{{ .image | relURL }}" alt="">
<img data-src="{{ .image | relURL }}" alt="">
</li>
{{ end }}
</ul>

24
layouts/contribution/list.html
View File

@ -16,7 +16,7 @@
{{ range .topType }}
<li>
<div class='title'>
<img src="{{ .icon1 | relURL }}" alt="">
<img data-src="{{ .icon1 | relURL }}" alt="">
<p>{{ .name }}</p>
</div>
<div class='line'></div>
@ -27,7 +27,7 @@
</li>
{{ end }}
</ul>
<img class='bottom-img' src="{{ .icon2 | relURL }}" alt="">
<img class='bottom-img' data-src="{{ .icon2 | relURL }}" alt="">
</li>
{{ end }}
</ul>
@ -37,19 +37,19 @@
<h2 class="title-black-h2">{{ .topic }}</h2>
<div>
<div class='top-div'>{{ .name }}</div>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
<ul class="common-flex-layout">
{{ range $index, $element := .type }}
<li>
<div>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
<span>{{ .name }}</span>
</div>
{{ if .children }}
<ul>
{{ range .children }}
<li class="">
<img src="{{ $topIcon | relURL }}" alt="">
<img data-src="{{ $topIcon | relURL }}" alt="">
<div>{{ .name }}</div>
{{ if eq $index 1}}
<p class='left'>{{ .content }}</p>
@ -85,7 +85,7 @@
{{ $icon = $element.iconActive }}
{{ end }}
<li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
<img src="{{ $icon | relURL }}" alt="">
<img data-src="{{ $icon | relURL }}" alt="">
<p>{{ $element.name }}</p>
</li>
{{ end }}
@ -95,7 +95,7 @@
{{ with $first := index .children 0}}
<div>
<div class='btn-change btn-left' data-num='-1'></div>
<img class='bottom-img' src="{{ .iconActive | relURL }}" alt="">
<img class='bottom-img' data-src="{{ .iconActive | relURL }}" alt="">
<div class='btn-change btn-right' data-num='1'></div>
</div>
<a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
@ -103,7 +103,7 @@
<ul>
{{ range .children }}
<li>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
</li>
{{ end }}
</ul>
@ -114,12 +114,12 @@
<section class='section-4'>
{{ with .Params.section4.involved }}
<img src="/images/contribution/involve-bg.jpg" alt="">
<img data-src="/images/contribution/involve-bg.jpg" alt="">
<h2 class="title-white-h2 ">{{ .title }}</h2>
<div class="common-flex-layout">
{{ range .children}}
<div>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
<h3 class="title-white-h3">{{ .title }}</h3>
<p class="common-center-p">{{ .content }}</p>
<div>
@ -138,7 +138,7 @@
<ul>
{{ range .list }}
<li>
<img src="{{ .icon }}" alt="">
<img data-src="{{ .icon }}" alt="">
</li>
{{ end }}
</ul>
@ -196,7 +196,7 @@
var ul = bottomDiv.find('ul')
ul.empty()
$.each(info.children, function( key, value ) {
ul.append('<li><img src="' + value.icon + '" alt="" ></li>');
ul.append('<li><img data-src="' + value.icon + '" alt="" ></li>');
});
}

2
layouts/contribution/request.html
View File

@ -19,7 +19,7 @@
</section>
<section class='section-4' style="min-height: 445px; padding-bottom: 0;">
<img src="/images/contribution/involve-bg.jpg" alt="">
<img data-src="/images/contribution/involve-bg.jpg" alt="">
</section>
{{ end }}

2
layouts/docs/list.html
View File

@ -16,7 +16,7 @@
</head>
<body>
<header>
<a href="{{ site.Home.RelPermalink }}"><img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
<a href="{{ site.Home.RelPermalink }}"><img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
<div class="header-div">
<h1>{{ i18n "introduction8" }}</h1>
<p>{{ i18n "introduction9" }}</p>

2
layouts/docs/single.html
View File

@ -20,7 +20,7 @@
</div>
<div class="middle-div">
<div class="header-div">
<a href="{{ site.Home.RelPermalink }}"><img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
<a href="{{ site.Home.RelPermalink }}"><img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
</div>
<div class="content-div">
<div class="md-body">

38
layouts/index.html
View File

@ -2,9 +2,9 @@
{{ $data := index .Site.Data .Site.Language.Lang }}
<section class='section-1'>
{{ with .Params.section1 }}
<img class='img1' src="images/home/bg.jpg" alt="">
<img class='img2' src="/images/home/12-3.png" alt="">
<img class='img3' src="/images/home/2.svg" alt="">
<img class='img1' data-src="images/home/bg.jpg" alt="">
<img class='img2' data-src="/images/home/12-3.png" alt="">
<img class='img3' data-src="/images/home/2.svg" alt="">
<div class="common-layout">
<div>
<p class='p1'>{{ .title | safeHTML }}</p>
@ -17,9 +17,9 @@
<button class='btn2 common-btn'>{{ .btnContent2 }}</button>
</a>
</div>
<img class='img1' src="/images/home/53.png" alt="">
<img class='img2' src="/images/home/left.svg" alt="">
<img class='img4' src="/images/home/46.svg" alt="">
<img class='img1' data-src="/images/home/53.png" alt="">
<img class='img2' data-src="/images/home/left.svg" alt="">
<img class='img4' data-src="/images/home/46.svg" alt="">
</div>
{{ end }}
</section>
@ -64,7 +64,7 @@
<li>{{ .content | safeHTML }}</li>
{{ end }}
</ul>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
</div>
{{ end }}
@ -75,8 +75,8 @@
<section class='section-4'>
{{ with .Params.section4 }}
<img class='bg-1' src="/images/home/section4-left.png" alt="">
<img class='bg-2' src="/images/home/section4-right.svg" alt="">
<img class='bg-1' data-src="/images/home/section4-left.png" alt="">
<img class='bg-2' data-src="/images/home/section4-right.svg" alt="">
<div class="common-layout">
<div>
<h2>{{ .title }}</h2>
@ -84,7 +84,7 @@
<ul>
{{ range .children }}
<li>
<img src="{{ .icon }}" alt="">
<img data-src="{{ .icon }}" alt="">
<div>
<h3 class="title-white-h3">{{ .name }}</h3>
<p class="common-p">{{ .content | safeHTML }}</p>
@ -100,7 +100,7 @@
<div>
<div class='top-line {{ .color }}'></div>
<div class='img-span-div'>
<img class="common-middle-inline" src="{{ .icon }}" alt="">
<img class="common-middle-inline" data-src="{{ .icon }}" alt="">
<span class="common-middle-inline">{{ .name }}</span>
</div>
<p class="common-p">{{ .content | safeHTML }}</p>
@ -130,7 +130,7 @@
<ul>
{{ range .children }}
<li>
<img src="{{ .icon }}" alt="">
<img data-src="{{ .icon }}" alt="">
</li>
{{ end }}
</ul>
@ -148,8 +148,8 @@
</ul>
</div>
<div class='image'>
<img src="/images/home/applications.png" alt="">
<img src="/images/home/applications.png" alt="">
<img data-src="/images/home/applications.png" alt="">
<img data-src="/images/home/applications.png" alt="">
</div>
</div>
{{ end }}
@ -166,7 +166,7 @@
<ul class="common-flex-layout">
{{ range .children }}
<li>
<img src="{{ .icon }}" alt="">
<img data-src="{{ .icon }}" alt="">
</li>
{{ end }}
</ul>
@ -179,12 +179,12 @@
<a class='join-div' href="{{ .joinLink }}">
<p class='p1'>{{ .joinTitle }}</p>
<p class='p2'>{{ .joinContent }}</p>
<img src="/images/home/join-right.svg" alt="">
<img data-src="/images/home/join-right.svg" alt="">
</a>
<img class='bottom-img' src="{{ .image }}" alt="">
<img class='bottom-img' data-src="{{ .image }}" alt="">
</div>
<img class='bg-1' src="/images/home/section6-left.svg" alt="">
<img class='bg-2' src="/images/home/section6-right.svg" alt="">
<img class='bg-1' data-src="/images/home/section6-left.svg" alt="">
<img class='bg-2' data-src="/images/home/section6-right.svg" alt="">
{{ end }}
</section>

29
layouts/partials/footer.html
View File

@ -4,7 +4,7 @@
<div class="footer-main common-layout">
<div class="up-main">
<div class="left-div">
<img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
<img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
<p>{{ i18n "introduction7" }}</p>
<div>
<form
@ -45,7 +45,7 @@
{{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
<div class="hide-div">
<p>Follow the official account</p>
<img src="/images/footer/wechat_code.svg" alt="">
<img data-src="/images/footer/wechat_code.svg" alt="">
</div>
</a>
<!-- <a class='wechat' href="javascript:void(0);">
@ -103,6 +103,31 @@
return reg.test(email)
}
var lazyLoad = function(allImg, imgNum) {
for (var i = 0; i < imgNum; i++) {
var img = allImg.eq(i)
var loaded = img.attr("data-loaded");
if (loaded) {
continue
}
if (img.offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
var src = img.attr("data-src")
img.attr("src", src)
img.attr("data-loaded", true)
}
}
}
var bindLayLoad = function() {
var allImg = $('img')
var imgNum = allImg.length
lazyLoad(allImg, imgNum)
$(window).scroll(function() {
lazyLoad(allImg, imgNum)
});
}
bindLayLoad()
bindSubmit()
bindHideMessage()
</script>

12
layouts/partials/header.html
View File

@ -3,7 +3,7 @@
<div class="common-layout">
<div class="header-container">
<a href="{{ site.Home.RelPermalink }}">
<img src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
<img data-src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
</a>
<ul class="nav">
@ -49,7 +49,7 @@
<ul>
<li class="language-menu">
<div>
<img src="/images/header/black.svg" alt="">
<img data-src="/images/header/black.svg" alt="">
<span>{{ .Site.Language.LanguageName }}</span>
</div>
<ul class="dropdown-menu">
@ -74,7 +74,7 @@
<a class='link-3' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
</li>
<li class="menu-icon">
<img src="/images/header/menu.svg" alt="">
<img data-src="/images/header/menu.svg" alt="">
</li>
</ul>
</div>
@ -118,13 +118,13 @@
</div>
<div class="link-div">
<a href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer">
<img src="/images/header/slack-hover.svg" alt="">
<img data-src="/images/header/slack-hover.svg" alt="">
</a>
<a href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer">
<img src="/images/header/twitter-hover.svg" alt="">
<img data-src="/images/header/twitter-hover.svg" alt="">
</a>
<a href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer">
<img src="/images/header/github-hover.svg" alt="">
<img data-src="/images/header/github-hover.svg" alt="">
</a>
</div>
</div>

16
layouts/partner/list.html
View File

@ -15,32 +15,32 @@
<div class="left-div">
<div class="common-content">{{ .title }}</div>
<p class="common-p">{{ .content }}</p>
<img class='img-1' src="{{ .bg2 | relURL }}" alt="">
<img class='img-2' src="{{ .bg3 | relURL }}" alt="">
<img class='img-1' data-src="{{ .bg2 | relURL }}" alt="">
<img class='img-2' data-src="{{ .bg3 | relURL }}" alt="">
</div>
<div class="right-div">
<img src="{{ .mapImage | relURL }}" alt="">
<img data-src="{{ .mapImage | relURL }}" alt="">
<div class='btn-div div-1'>
<p>{{ .name1 }}</p>
<div>
<img src="{{ .icon1 | relURL }}" alt="">
<img data-src="{{ .icon1 | relURL }}" alt="">
</div>
</div>
<div class='btn-div div-2'>
<p>{{ .name2 }}</p>
<div>
<img src="{{ .icon2 | relURL }}" alt="">
<img data-src="{{ .icon2 | relURL }}" alt="">
</div>
</div>
<div class='btn-div div-3'>
<p>{{ .name3 }}</p>
<div>
<img src="{{ .icon3 | relURL }}" alt="">
<img data-src="{{ .icon3 | relURL }}" alt="">
</div>
</div>
</div>
</div>
<img src="{{ .bg1 | relURL }}" alt="">
<img data-src="{{ .bg1 | relURL }}" alt="">
{{ end }}
</section>
@ -71,7 +71,7 @@
<ul class="partner-ul">
{{ range .featuredPartnerList }}
<li>
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
<div class='type'>{{ .partnerType }}</div>
<div class='content'>{{ .content }}</div>
</li>

14
layouts/partner/request.html
View File

@ -15,32 +15,32 @@
<div class="left-div">
<div class="common-content">{{ .title }}</div>
<p class="common-p">{{ .content }}</p>
<img class='img-1' src="{{ .bg2 | relURL }}" alt="">
<img class='img-2' src="{{ .bg3 | relURL }}" alt="">
<img class='img-1' data-src="{{ .bg2 | relURL }}" alt="">
<img class='img-2' data-src="{{ .bg3 | relURL }}" alt="">
</div>
<div class="right-div">
<img src="{{ .mapImage | relURL }}" alt="">
<img data-src="{{ .mapImage | relURL }}" alt="">
<div class='btn-div div-1'>
<p>{{ .name1 }}</p>
<div>
<img src="{{ .icon1 | relURL }}" alt="">
<img data-src="{{ .icon1 | relURL }}" alt="">
</div>
</div>
<div class='btn-div div-2'>
<p>{{ .name2 }}</p>
<div>
<img src="{{ .icon2 | relURL }}" alt="">
<img data-src="{{ .icon2 | relURL }}" alt="">
</div>
</div>
<div class='btn-div div-3'>
<p>{{ .name3 }}</p>
<div>
<img src="{{ .icon3 | relURL }}" alt="">
<img data-src="{{ .icon3 | relURL }}" alt="">
</div>
</div>
</div>
</div>
<img src="{{ .bg1 | relURL }}" alt="">
<img data-src="{{ .bg1 | relURL }}" alt="">
{{ end }}
</section>

2
layouts/projects/list.html
View File

@ -17,7 +17,7 @@
{{ $name := .name }}
{{ range .children }}
<li data-name="{{ $name }}">
<img src="{{ .icon | relURL }}" alt="">
<img data-src="{{ .icon | relURL }}" alt="">
<a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .title }}</a>
<p>{{ .description }}</p>
<div>

4
layouts/videos/list.html
View File

@ -98,8 +98,8 @@
}
var createVideoLi = function(video) {
var img = '<img src="' + video.snapshot + '" alt="">'
var button = '<img class="btn" src="/images/videos/play.svg" alt="">'
var img = '<img data-src="' + video.snapshot + '" alt="">'
var button = '<img data-class="btn" src="/images/videos/play.svg" alt="">'
var title = '<h3>' + video.title + '</h3>'
var group = '<p>' + video.group + '</p>'
var time = '<p class="time">' + video.createTime + '</p>'