因此，我尝试在我的摄影网站上使用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/上查看该插件的文档。
我实际上确实让它工作了一分钟，但后来我做了一些更改，它开始再次加载所有图像。所以我把它改回来了，但还是没有区别。所做的更改只是通过注释掉第二列和第三列中的图像将图像限制为一列。另外，由于某种原因，仅当我将网站上传到实时服务器时，延迟加载才起作用。
根据测试站点，该插件可以正常工作，并且在第一次加载时会延迟加载图像。您可能会感到困惑，因为在第一次加载后，图像已经保存在浏览器的缓存中，因此它们会立即加载。