javascript - jQuery Lazy 插件 - 一次加载所有图像
问题描述
因此,我正在尝试为我的摄影网站使用 jQuery Lazy 插件,以便在用户向下滚动页面时延迟加载我的图像。问题是,该插件一次加载所有图像,而不是像它应该做的那样只在它们进入视图时加载。有没有人有这个插件的经验或知道发生了什么?您可以在photography-test.timothygrindall.com上查看我的测试站点。
这是页面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography by Timothy Grindall</title>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amiri|Cormorant+Garamond|Nanum+Myeongjo|Noto+Serif|PT+Serif&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Photography by Timothy Grindall">
<meta name="keywords" content="photography, landscape, portrait, Timothy, Grindall, Washington">
<meta name="author" content="Timothy Grindall">
<meta charset="utf-8">
<!-- no favicon right now -->
<!-- <link rel="icon" href="/images/favicon.png" type="image/png"> -->
<!-- scripts for lazy image loading -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazy.min.js"></script>
<!-- script to call lazy loading -->
<script type='text/javascript'>
$(function() {
$('.lazy').Lazy({
effect: 'fadeIn',
effectTime: 500,
visibleOnly: true,
onError: function(element) {
console.log('Error loading ' + element[0].src);
},
afterLoad: function(element) {
console.log('Loaded ' + element[0].src);
// console.log(element);
}
});
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-7203249-8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-7203249-8');
</script>
</head>
<body>
<div class="top-wrapper">
<div class="sidebar">
<h2>Timothy Grindall</h2>
<ul class="sidebar-menu">
<li><a href="/">Portfolio</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="https://wordpress.timothygrindall.com/">Blog</a></li>
</ul>
</div><div class="main">
<p>I'm a Washington based photographer who has been taking pictures for years as an amateur but only recently decided to do it professionally. Below you will see some of my best images.</p>
<!-- <br />
<p>You can see my blog to the left which doesn't have very many posts on photography yet but I'm planning on writing some soon.</p>
<br />
<p>My Equipment is an old hand-me-down Nikon D3100 and some cheaper lenses covering 12-200mm. But my 35mm prime is my favorite.</p> -->
</div>
</div>
<div class="gallery-wrapper">
<div class="gallery">
<div class="column">
<img class="lazy thumbnail" data-src="images/78690010_small.jpg"><img class="lazy thumbnail" data-src="small_images/_CSC4458.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0023.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0032.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0042.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0043.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0044.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0044-2.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0069.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0100.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0205.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0288.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0715.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC0771.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC1613.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC1919.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC1937.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC1947.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_0061.jpg">
</div>
<!--<div class="column">
<img class="lazy thumbnail" data-src="small_images/_DSC1967.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC1971.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2047.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2072.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2103.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2197.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2259-edit-2.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2667.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2767.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC2950-2.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3168.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3185.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3215.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3219.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3232.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3303.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3314.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC3345.jpg"><img class="lazy thumbnail" data-src="small_images/render-2_contrast.jpg">
</div>
<div class="column">
<img class="lazy thumbnail" data-src="small_images/_DSC3377.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC4249-2.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC4428.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC4596.jpg"><img class="lazy thumbnail" data-src="small_images/_DSC4671.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_0061.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_0754.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_0792.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_1914.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_3384.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_4006.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_5035.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_5511.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_5519.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_5894.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_8355.jpg"><img class="lazy thumbnail" data-src="small_images/DSC_8621.jpg">
</div>-->
</div>
</div>
<div class="footer-wrapper">
<div class="footer">© Copyright 2019 Timothy Grindall</div>
</div>
</body>
</html>
html 只是一个图像标签列表,其中包含“lazy”类和“data-src”属性作为要下载的图像。
您可以在http://jquery.eisbehr.de/lazy/查看插件的文档。
实际上我确实让它工作了一分钟,但后来我改变了一些东西,它再次开始加载所有图像。所以我把它改回来了,但仍然没有区别。这些更改只是通过注释掉第二列和第三列中的图像来将图像限制为一列。此外,延迟加载仅在我出于某种原因将网站上传到我的实时服务器时才起作用。
解决方案
根据测试站点,该插件工作正常,并且在首次加载时延迟加载图像。您可能会感到困惑,因为在第一次加载后,图像已经保存在浏览器的缓存中,因此它们会立即加载。
推荐阅读
- django - Django 将错误的域插入到激活电子邮件、facebook auth 和文件浏览器
- nativescript - Nativescript vue devtools 连接不上
- machine-learning - 将字符串自变量映射到字符串分类因变量的估计器选择
- c# - 如何:在 Visual Studio 中的解决方案之外的本地计算机上调试源代码
- c# - 仅使用 linq 的最长重复序列
- sql - 我无法从插入的 ID 中捕获感兴趣的 ID,并在存储过程的 exec 中使用它
- javascript - React:在 ReactJS 中未更新 UI 数据
- python - 绘制 Panda 数据框子集的平均值
- android - 在 Firebase 实时数据库中搜索内容
- python - 在 Windows 机器上运行的简单烧瓶服务器和外部不可见的静态 IP