Skip to content

Commit

Permalink
Inline sizing, deffering, lazyloading of resources used
Browse files Browse the repository at this point in the history
  • Loading branch information
arslanashraf7 committed Jan 20, 2021
1 parent e88393f commit 36be99c
Show file tree
Hide file tree
Showing 9 changed files with 45 additions and 11 deletions.
2 changes: 1 addition & 1 deletion cms/templates/partials/course-carousel.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% load static wagtailcore_tags wagtailimages_tags %}
<div id="courseLineup" class="course-in-program">
<div id="courseLineup" class="course-in-program lazy" >
<div class="container">
<div class="head">
<h1>{{ page.heading }}</h1>
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/partials/courseware-carousel-base.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% if courseware_page.thumbnail_image %}
<img src="{% image_version_url courseware_page.thumbnail_image "fill-480x275" %}" alt="{{ courseware_page.title }}" />
{% else %}
<img src="{% static 'images/mit-dome.png' %}" width="480" height="275" alt="{{ courseware_page.title }}" />
<img src="{% static 'images/mit-dome.png' %}" width="480" height="275" alt="{{ courseware_page.title }}" loading="lazy" />
{% endif %}
<a class="title" href="{% pageurl courseware_page %}">{{ courseware_page.title }}</a>
<p>{{ courseware_page.subhead }}</p>
Expand Down
5 changes: 3 additions & 2 deletions cms/templates/partials/faculty-carousel.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{% load wagtailcore_tags image_version_url %}
<div id="faculty" class="faculty-block">

<div id="faculty" class="faculty-block lazy">
<div class="container">
<div class="head">
<h1>{{ page.heading }}</h1>
Expand All @@ -11,7 +12,7 @@ <h3>{{ page.subhead }}</h3>
{% for member in page.members %}
<div class="slide">
<div class="slide-holder">
<img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}">
<img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}" loading="lazy">
<h2>{{ member.value.name }}</h2>
<div class="text-holder">
{{ member.value.description|richtext }}
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/partials/learning-techniques.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h1>{{ page.title }}</h1>
{% for technique in page.technique_items %}
<li>
<div class="img-holder">
<img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" />
<img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" loading="lazy"/>
</div>
<h3>{{ technique.value.heading }}</h3>
<h4>{{ technique.value.sub_heading }}</h4>
Expand Down
6 changes: 3 additions & 3 deletions cms/templates/partials/testimonial-carousel.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% load image_version_url wagtailcore_tags %}
<div id="testimonials" class="learners-block">
<div id="testimonials" class="learners-block lazy">
<div class="container">
<div class="head">
<h1>{{ page.heading }}</h1>
Expand All @@ -12,7 +12,7 @@ <h3>{{ page.subhead }}</h3>
<div class="slide">
<div class="slide-holder">
{% if testimonial.value.image %}
<img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" />
<img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" height="75" width="75" loading="lazy"/>
{% endif %}
<h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
<p>{{ testimonial.value.quote|truncatechars:150 }}</p>
Expand All @@ -36,7 +36,7 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
</div>
<div class="container px-4">
<div class="row py-2">
<img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" />
<img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" height="100" width="100" loading="lazy"/>
</div>
<div class="row mb-4">
<h2 class="modal-title text-uppercase">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
Expand Down
20 changes: 20 additions & 0 deletions cms/templates/product_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,24 @@
{% if faqs %} {% include "partials/faqs.html" with faqs=faqs %} {% endif %}
{% if propel_career %} {% include "partials/text-section.html" with page=propel_career %} {% endif %}
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy"));
if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
let lazyBackgroundObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("img");
lazyBackgroundObserver.unobserve(entry.target);
}
});
});

lazyBackgrounds.forEach(function (lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
});
</script>

{% endblock %}
6 changes: 5 additions & 1 deletion static/scss/detail/courses-in-program.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.course-in-program {
width: 100%;
padding: 100px 0 50px;
background: white url("#{$static-path}/images/course-carousel-bg.jpg") no-repeat 50% 50%;
background: white no-repeat 50% 50%;
min-height: 400px;
overflow: hidden;
position: relative;
Expand Down Expand Up @@ -49,6 +49,10 @@
}
}

.course-in-program.img {
background-image: url("#{$static-path}/images/course-carousel-bg.jpg");
}

.course-slider {
position: relative;
margin: 0 -15px 50px;
Expand Down
7 changes: 6 additions & 1 deletion static/scss/detail/faculty.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.faculty-block {
width: 100%;
padding: 100px 0 50px;
background: black url("#{$static-path}/images/faculty-bg.jpg") no-repeat 50% 0;
background: black no-repeat 50% 0;
min-height: 400px;
overflow: hidden;
position: relative;
Expand All @@ -29,6 +29,11 @@
}
}

.faculty-block.img{
background-image: url("#{$static-path}/images/faculty-bg.jpg");
}


.faculty-slider {
position: relative;
margin: 0 -15px;
Expand Down
6 changes: 5 additions & 1 deletion static/scss/detail/testimonial-carousel.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// sass-lint:disable mixins-before-declarations
.learners-block {
padding: 100px 0 50px;
background: white url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
background: white no-repeat 50% 0;
min-height: 400px;
overflow: hidden;
position: relative;
Expand Down Expand Up @@ -41,6 +41,10 @@
}
}

.learners-block.img{
background-image: url("#{$static-path}/images/testimonial-carousel-bg.jpg");
}

.learners-slider {
position: relative;
margin: 0 -15px;
Expand Down

0 comments on commit 36be99c

Please sign in to comment.