Skip to content

Commit b1f37ab

Browse files
tdunn891tdunn891
committed
Implement lazyload of images, optimise cdn loading
1 parent a80db4d commit b1f37ab

File tree

7 files changed

+55
-53
lines changed

7 files changed

+55
-53
lines changed

‎accounts/templates/index.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{% extends 'base.html' %}
22
{% load static from static %}
33
{% block title %}TrackIt | Home{% endblock %}
4-
{% block page_heading %}{% endblock %}
54
{% block content %}
65
<div class="row">
76
<div class="d-none d-sm-inline-block col-md-4 text-right" id="index-tag-line">
@@ -17,7 +16,8 @@ <h2 class="display-5">Issue and Feature tracking done right</h2>
1716
{% if not user.is_authenticated %}
1817
<p>Get started today:</p>
1918
<a href="{% url 'registration' %}" class="btn btn-primary"><i class="material-icons align-top">
20-
person_add</i> Create Free Account</a>
19+
person_add</i> Create Free Account
20+
</a>
2121
<br>
2222
<br>
2323
<p>Returning Users: </p>
@@ -47,9 +47,9 @@ <h2 class="display-5">Issue and Feature tracking done right</h2>
4747
<div class="row">
4848
<div class="col-12">
4949
<br>
50-
<h4 class="">
51-
<i class="material-icons align-bottom">build</i>
52-
Features</h4>
50+
<h4>
51+
<i class="material-icons align-bottom">build</i> Features
52+
</h4>
5353
<br>
5454
</div>
5555
</div>
@@ -129,7 +129,6 @@ <h4>Plans</h4>
129129
<br>
130130
</div>
131131
<div class="col-12 col-md-6 col-lg-4 offset-lg-2">
132-
<!-- <div class="text-center justify-content-center"> -->
133132
<div class="card border-primary plan-card text-center">
134133
<div class="card-header plan-card-header">Get Started
135134
<!-- If user is logged in Basic User, show CURRENT -->
@@ -194,7 +193,6 @@ <h5 class="card-title">&euro;9.90</h5>
194193
{% endif %}
195194
</div>
196195
</div>
197-
<!-- </div> -->
198196
</div>
199197
</div>
200198
</div>

‎accounts/templates/profile.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{% extends 'base.html' %}
22
{% load crispy_forms_tags %}
33
{% block title %}TrackIt | My Account{% endblock %}
4-
{% block page_heading %}<i class="material-icons align-bottom heading-icon">account_circle</i> My Account
4+
{% block page_heading %}
5+
<h3>
6+
<i class="material-icons align-bottom heading-icon">account_circle</i> My Account
7+
</h3>
58
<hr>
69
{% endblock %}
710
{% block container-class %}profile-container{% endblock %}
@@ -10,8 +13,8 @@
1013
<div class="col-md-3">
1114
<a href="#">
1215
{% if user.profile.image %}
13-
<img class="rounded-circle" src="{{ user.profile.image.url }}" alt="Profile Image" data-toggle="tooltip"
14-
title="Upload New Image" data-placement="bottom" id="profile-image">
16+
<img class="lazyload rounded-circle" data-src="{{ user.profile.image.url }}" alt="Profile Image"
17+
data-toggle="tooltip" title="Upload New Image" data-placement="bottom" id="profile-image">
1518
{% else %}
1619
<i class="material-icons-outlined" id="default-profile-image" data-toggle="tooltip" title="Upload New Image"
1720
data-placement="bottom">account_circle</i>
@@ -51,7 +54,7 @@
5154
<form id="first-name-form" class="d-none" action="{% url 'update_first_name' %}" method="post">
5255
{% csrf_token %}
5356
<input id="first-name-input" name="updated_first_name" type="text"
54-
value="{{ user.first_name }}">
57+
value="{{ user.first_name }}" />
5558
<button class="btn btn-primary btn-sm" type="submit">Update</button>
5659
</form>
5760
</td>
@@ -69,7 +72,7 @@
6972
</a>
7073
<form id="last-name-form" class="d-none" action="{% url 'update_last_name' %}" method="post">
7174
{% csrf_token %}
72-
<input id="last-name-input" name="updated_last_name" type="text" value="{{ user.last_name }}">
75+
<input id="last-name-input" name="updated_last_name" type="text" value="{{ user.last_name }}" />
7376
<button class="btn btn-primary btn-sm" type="submit">Update</button>
7477
</form>
7578
</td>
@@ -83,8 +86,8 @@
8386
<td>
8487
<span id="current-zoomid">
8588
{% if user.profile.zoom_id %}
86-
<a href="https://zoom.us/j/{{ user.profile.zoom_id }}" target="_blank" id="zoom-url"
87-
data-toggle="tooltip" data-placement="left" title="Start Zoom Meeting">
89+
<a href="https://zoom.us/j/{{ user.profile.zoom_id }}" target="_blank" rel="noopener"
90+
id="zoom-url" data-toggle="tooltip" data-placement="left" title="Start Zoom Meeting">
8891
{{ user.profile.zoom_id }}
8992
</a>
9093
{% endif %}

‎accounts/templates/user_list.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{% extends 'base.html' %}
22
{% block head %}
3-
<link rel="stylesheet" type="text/css"
4-
href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.css">
3+
<!-- <link rel="stylesheet" type="text/css"
4+
href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.css"> -->
5+
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css" />
56
{% endblock %}
67
{% block title %}Trackit | Team{% endblock %}
78
{% block page_heading %}
@@ -64,7 +65,7 @@ <h3>
6465
</td>
6566
<td class="align-middle">
6667
{% if submitter.profile.zoom_id %}
67-
<a href="https://zoom.us/j/{{ submitter.profile.zoom_id }}" target="_blank"
68+
<a href="https://zoom.us/j/{{ submitter.profile.zoom_id }}" target="_blank" rel="noopener"
6869
data-toggle="tooltip" title="Join Zoom Meeting:" data-placement="left">
6970
{{ submitter.profile.zoom_id }}
7071
</a>
@@ -118,7 +119,7 @@ <h3>
118119
</td>
119120
<td class="align-middle">
120121
{% if staff_member.profile.zoom_id %}
121-
<a href="https://zoom.us/j/{{ submitter.profile.zoom_id }}" target="_blank"
122+
<a href="https://zoom.us/j/{{ submitter.profile.zoom_id }}" target="_blank" rel="noopener"
122123
data-toggle="tooltip" title="Zoom Call:" data-placement="left">
123124
{{ staff_member.profile.zoom_id }}
124125
</a>
@@ -136,6 +137,7 @@ <h3>
136137
{% endblock %}
137138
{% block scripts %}
138139
<!-- DataTables.js -->
139-
<script
140-
src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
140+
<!-- <script
141+
src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.js"></script> -->
142+
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
141143
{% endblock %}

‎templates/base.html‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@
1111
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1212
<!-- Material Icons -->
1313
<link href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined" rel="stylesheet">
14-
<!-- jQuery -->
15-
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
16-
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
17-
<!-- popper.js -->
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
19-
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
20-
crossorigin="anonymous"></script>
21-
<!-- Bootstrap.js -->
22-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
23-
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
24-
crossorigin="anonymous"></script>
2514
<!-- Favicon -->
2615
<link rel="icon" type="image/png" href="{% static 'images/target_favicon.png' %}">
2716
{% block head %}
@@ -71,8 +60,8 @@
7160
<a class="nav-item nav-link align-middle" id="profile-nav-link" data-toggle="tooltip" title="Account"
7261
href="{% url 'profile' %}">
7362
{% if user.profile.image %}
74-
<img src="{{ user.profile.image.url }}" alt="My Profile Picture" id="account-profile-thumbnail"
75-
class="rounded-circle align-middle">
63+
<img data-src="{{ user.profile.image.url }}" alt="My Profile Picture" id="account-profile-thumbnail"
64+
class="lazyload rounded-circle align-middle">
7665
{% else %}
7766
<i class="material-icons align-middle">account_circle</i>
7867
{% endif %}
@@ -139,14 +128,27 @@
139128
</a>
140129
</p>
141130
<p>
142-
<a href="https://github.com/tdunn891/milestone-3" target="_blank">
131+
<a href="https://github.com/tdunn891/milestone-4" target="_blank" rel="noopener">
143132
<img src="{% static 'images/github-32.png' %}" id="github-logo" alt="GitHub Logo">
144133
</a>
145134
</p>
146135
</div>
147136
</div>
148137
</footer>
149138
</div>
139+
<!-- jQuery -->
140+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
141+
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
142+
<!-- popper.js -->
143+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
144+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
145+
crossorigin="anonymous"></script>
146+
<!-- Bootstrap.js -->
147+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
148+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
149+
crossorigin="anonymous"></script>
150+
<!-- Lazy Sizes (lazyload images) -->
151+
<script src="{% static 'js/lazysizes.min.js' %}" async=""></script>
150152
<!-- base.js -->
151153
<script src="{% static 'js/base.js' %}"></script>
152154
{% block scripts %}

‎tickets/templates/dashboard.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
{% load static from staticfiles %}
33
{% load bootstrap_tags %}
44
{% block head %}
5-
<!-- d3 time -->
6-
<script src="https://d3js.org/d3-time.v1.min.js"></script>
7-
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
85
<!-- dc.min.css -->
96
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.9/dc.min.css"
107
integrity="sha256-uq/xxnkXyjSgp47vyRtSvBEwWuxTFbtxbKwOxkmWIJM=" crossorigin="anonymous">
@@ -60,6 +57,9 @@ <h5 class="lead">In-Demand Tickets</h5>
6057
{% endblock %}
6158

6259
{% block scripts %}
60+
<!-- d3 time -->
61+
<script src="https://d3js.org/d3-time.v1.min.js"></script>
62+
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
6363
<!-- d3.js -->
6464
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"
6565
integrity="sha256-m0QmIsBXcOMiETRmpT3qg2IQ/i0qazJA2miCHzOmS1Y=" crossorigin="anonymous"></script>

‎tickets/templates/tickets.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
{% block title %}TrackIt | Tickets{% endblock %}
33
{% block head %}
44
<!-- DataTables.net css -->
5-
<link rel="stylesheet" type="text/css"
6-
href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.css">
5+
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css" />
76
{% endblock %}
87
{% block page_heading %}
98
<h3>
@@ -110,9 +109,6 @@ <h3>
110109
</div>
111110
{% endblock %}
112111
{% block scripts %}
113-
<!-- VFS Fonts js -->
114-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
115112
<!-- DataTables js -->
116-
<script
117-
src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
113+
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
118114
{% endblock %}

‎tickets/templates/view_ticket.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ <h4 class="display-5">{{ ticket.summary}}
105105
<a href="#" class="badge badge-pill badge-info dropdown-toggle"
106106
data-toggle="dropdown" title="Mail to:" data-placement="left">
107107
{% if ticket.submitted_by.profile.image %}
108-
<img src="{{ ticket.submitted_by.profile.image.url }}"
109-
class="align-middle rounded-circle ticket-view-profile-image"
108+
<img data-src="{{ ticket.submitted_by.profile.image.url }}"
109+
class="lazyload align-middle rounded-circle ticket-view-profile-image"
110110
alt="Submitter's Profile Image">
111111
{% else %}
112112
<i class="material-icons align-middle ticket-view-profile-default">
@@ -121,7 +121,7 @@ <h4 class="display-5">{{ ticket.summary}}
121121
{% if ticket.submitted_by.profile.zoom_id %}
122122
<a class="dropdown-item"
123123
href="https://zoom.us/j/{{ ticket.submitted_by.profile.zoom_id }}"
124-
target="_blank">
124+
target="_blank" rel="noopener">
125125
<img src="https://zoom.us/zoom.ico" class="zoom-icon align-top"
126126
alt="zoom-icon">
127127
Join Zoom Meeting
@@ -138,8 +138,8 @@ <h4 class="display-5">{{ ticket.summary}}
138138
<a href="#" class="badge badge-pill badge-info dropdown-toggle"
139139
data-toggle="dropdown" title="Mail to:" data-placement="left">
140140
{% if ticket.assigned_to.profile.image %}
141-
<img src="{{ ticket.assigned_to.profile.image.url }}"
142-
class="align-middle rounded-circle ticket-view-profile-image"
141+
<img data-src="{{ ticket.assigned_to.profile.image.url }}"
142+
class="lazyload align-middle rounded-circle ticket-view-profile-image"
143143
alt="Assignee's Profile Image">
144144
{% else %}
145145
<i
@@ -154,7 +154,7 @@ <h4 class="display-5">{{ ticket.summary}}
154154
{% if ticket.assigned_to.profile.zoom_id %}
155155
<a class="dropdown-item"
156156
href="https://zoom.us/j/{{ ticket.assigned_to.profile.zoom_id }}"
157-
target="_blank">
157+
target="_blank" rel="noopener">
158158
<img src="https://zoom.us/zoom.ico" class="zoom-icon align-top"
159159
alt="zoom-icon">
160160
Join Zoom Meeting
@@ -198,12 +198,13 @@ <h4 class="display-5">{{ ticket.summary}}
198198
<div class="modal-dialog" role="document">
199199
<div class="modal-content">
200200
<div class="modal-body">
201-
<img src="{{ ticket.screenshot.url }}" alt="{{ ticket.screenshot }}">
201+
<img data-src="{{ ticket.screenshot.url }}" class="lazyload"
202+
alt="{{ ticket.screenshot }}">
202203
<br>
203204
<br>
204205
<span><b>Ticket: </b>{{ ticket.id }} | {{ ticket.summary }}</span>
205206
<span class="float-right"><b>Filename:</b> <a
206-
href="{{ ticket.screenshot.url }}" target="_blank"
207+
href="{{ ticket.screenshot.url }}" target="_blank" rel="noopener"
207208
data-toggle="tooltip" title="Open in New Tab"
208209
data-placement="bottom">
209210
{{ ticket.screenshot }}</a></span>
@@ -289,8 +290,8 @@ <h5><i class="material-icons align-top">insert_comment</i> Comments ({{ comments
289290
{% for comment in comments %}
290291
<li class="list-group-item">
291292
{% if comment.user.profile.image %}
292-
<img class="rounded-circle float-left comment-profile-image"
293-
src="{{ user.profile.image.url }}" alt="{{ user.first_name }}'s Profile Image">
293+
<img class="lazyload rounded-circle float-left comment-profile-image"
294+
data-src="{{ user.profile.image.url }}" alt="{{ user.first_name }}'s Profile Image">
294295
{% else %}
295296
<i class="material-icons float-left">account_circle</i>
296297
{% endif %}

0 commit comments

Comments
 (0)