diff --git a/public/js/dots.js b/public/js/dots.js
index 75a6aa6..266c846 100644
--- a/public/js/dots.js
+++ b/public/js/dots.js
@@ -1,17 +1,26 @@
-const truncate = () => {
-	$('.uk-card-title').each((i, e) => {
-		$(e).dotdotdot({
-			truncate: 'letter',
-			watch: true,
-			callback: (truncated) => {
-				if (truncated) {
-					$(e).attr('uk-tooltip', $(e).attr('data-title'));
-				} else {
-					$(e).removeAttr('uk-tooltip');
-				}
+/**
+ * Truncate a .uk-card-title element
+ *
+ * @function truncate
+ * @param {object} e - The title element to truncate
+ */
+const truncate = (e) => {
+	$(e).dotdotdot({
+		truncate: 'letter',
+		watch: true,
+		callback: (truncated) => {
+			if (truncated) {
+				$(e).attr('uk-tooltip', $(e).attr('data-title'));
+			} else {
+				$(e).removeAttr('uk-tooltip');
 			}
-		});
+		}
 	});
 };
 
-truncate();
+$('.uk-card-title').each((i, e) => {
+	// Truncate the title when it first enters the view
+	$(e).one('inview', () => {
+		truncate(e);
+	});
+});
diff --git a/src/views/components/dots-scripts.html.ecr b/src/views/components/dots-scripts.html.ecr
new file mode 100644
index 0000000..41bb7b0
--- /dev/null
+++ b/src/views/components/dots-scripts.html.ecr
@@ -0,0 +1,3 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
+<script src="<%= base_url %>js/dots.js"></script>
diff --git a/src/views/home.html.ecr b/src/views/home.html.ecr
index f48a2ef..0700f4f 100644
--- a/src/views/home.html.ecr
+++ b/src/views/home.html.ecr
@@ -1,84 +1,83 @@
 <%- if new_user && empty_library -%>
 
-  <div class="uk-container uk-text-center">
-    <i class="fas fa-plus" style="font-size: 80px;"></i>
-    <h2>Add your first manga</h2>
-    <p style="margin-bottom: 40px;">We can't find any files yet. Add some to your library and they'll appear here.</p>
-    <dl class="uk-description-list">
-      <dt style="font-weight: 500;">Current library path</dt>
-      <dd><code><%= Config.current.library_path %></code></dd>
-      <dt style="font-weight: 500;">Want to change your library path?</dt>
-      <dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd>
-      <dt style="font-weight: 500;">Can't see your files yet?</dt>
-      <dd>
-      You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete
-      <% if is_admin %>
-        , or manually re-scan from <a href="<%= base_url %>admin">Admin</a>
-      <% end %>.
-      </dd>
-    </dl>
-  </div>
+    <div class="uk-container uk-text-center">
+        <i class="fas fa-plus" style="font-size: 80px;"></i>
+        <h2>Add your first manga</h2>
+        <p style="margin-bottom: 40px;">We can't find any files yet. Add some to your library and they'll appear here.</p>
+        <dl class="uk-description-list">
+            <dt style="font-weight: 500;">Current library path</dt>
+            <dd><code><%= Config.current.library_path %></code></dd>
+            <dt style="font-weight: 500;">Want to change your library path?</dt>
+            <dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd>
+            <dt style="font-weight: 500;">Can't see your files yet?</dt>
+            <dd>
+            You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete
+            <% if is_admin %>
+                , or manually re-scan from <a href="<%= base_url %>admin">Admin</a>
+            <% end %>.
+            </dd>
+        </dl>
+    </div>
 
 <%- elsif new_user && empty_library == false -%>
 
-  <div class="uk-container uk-text-center">
-    <i class="fas fa-book-open" style="font-size: 80px;"></i>
-    <h2>Read your first manga</h2>
-    <p>Once you start reading, Mango will remember where you left off
-    and show your entries here.</p>
-    <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
-  </div>
+    <div class="uk-container uk-text-center">
+        <i class="fas fa-book-open" style="font-size: 80px;"></i>
+        <h2>Read your first manga</h2>
+        <p>Once you start reading, Mango will remember where you left off
+        and show your entries here.</p>
+        <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
+    </div>
 
 <%- elsif new_user == false && empty_library == false -%>
 
-  <%- if continue_reading.empty? && recently_added.empty? -%>
-    <div class="uk-container uk-text-center">
-      <img src="<%= base_url %>img/banner.png" style="max-width: 400px; padding: 0 20px;">
-      <p>A self-hosted manga server and reader</p>
-      <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
-    </div>
-  <%- end -%>
+    <%- if continue_reading.empty? && recently_added.empty? -%>
+        <div class="uk-container uk-text-center">
+            <img src="<%= base_url %>img/banner.png" style="max-width: 400px; padding: 0 20px;">
+            <p>A self-hosted manga server and reader</p>
+            <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
+        </div>
+    <%- end -%>
 
-  <%- unless continue_reading.empty? -%>
-    <h2 class="uk-title home-headings">Continue Reading</h2>
-    <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-      <%- continue_reading.each do |cr| -%>
-        <% item = cr[:entry] %>
-        <% progress = cr[:percentage] %>
-        <%= render_component "card" %>
-      <%- end -%>
-    </div>
-  <%- end -%>
+    <%- unless continue_reading.empty? -%>
+        <h2 class="uk-title home-headings">Continue Reading</h2>
+        <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+            <%- continue_reading.each do |cr| -%>
+                <% item = cr[:entry] %>
+                <% progress = cr[:percentage] %>
+                <%= render_component "card" %>
+            <%- end -%>
+        </div>
+    <%- end -%>
 
-  <%- unless start_reading.empty? -%>
-    <h2 class="uk-title home-headings">Start Reading</h2>
-    <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-      <%- start_reading.each do |t| -%>
-        <% item = t %>
-        <% progress = 0.0 %>
-        <%= render_component "card" %>
-      <%- end -%>
-    </div>
-  <%- end -%>
+    <%- unless start_reading.empty? -%>
+        <h2 class="uk-title home-headings">Start Reading</h2>
+        <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+            <%- start_reading.each do |t| -%>
+                <% item = t %>
+                <% progress = 0.0 %>
+                <%= render_component "card" %>
+            <%- end -%>
+        </div>
+    <%- end -%>
 
-  <%- unless recently_added.empty? -%>
-    <h2 class="uk-title home-headings">Recently Added</h2>
-    <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-      <%- recently_added.each do |ra| -%>
-        <% item = ra %>
-        <% progress = ra[:percentage] %>
-        <%= render_component "card" %>
-      <%- end -%>
-    </div>
-  <%- end -%>
+    <%- unless recently_added.empty? -%>
+        <h2 class="uk-title home-headings">Recently Added</h2>
+        <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+            <%- recently_added.each do |ra| -%>
+                <% item = ra %>
+                <% progress = ra[:percentage] %>
+                <%= render_component "card" %>
+            <%- end -%>
+        </div>
+    <%- end -%>
 
-  <%= render_component "entry-modal" %>
+    <%= render_component "entry-modal" %>
 
 <%- end -%>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-  <script src="<%= base_url %>js/dots.js"></script>
-  <script src="<%= base_url %>js/alert.js"></script>
-  <script src="<%= base_url %>js/title.js"></script>
+    <%= render_component "dots-scripts" %>
+    <script src="<%= base_url %>js/alert.js"></script>
+    <script src="<%= base_url %>js/title.js"></script>
 <% end %>
diff --git a/src/views/library.html.ecr b/src/views/library.html.ecr
index 255ccd3..21ec280 100644
--- a/src/views/library.html.ecr
+++ b/src/views/library.html.ecr
@@ -24,8 +24,7 @@
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-  <script src="<%= base_url %>js/dots.js"></script>
+  <%= render_component "dots-scripts" %>
   <script src="<%= base_url %>js/search.js"></script>
   <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>
diff --git a/src/views/title.html.ecr b/src/views/title.html.ecr
index a66d887..8eb7881 100644
--- a/src/views/title.html.ecr
+++ b/src/views/title.html.ecr
@@ -117,8 +117,7 @@
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-  <script src="<%= base_url %>js/dots.js"></script>
+  <%= render_component "dots-scripts" %>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/title.js"></script>
   <script src="<%= base_url %>js/search.js"></script>