jQuery惰性插件-一次加载所有图像
jQuery惰性插件-一次加载所有图像
提问于 2019-10-08 04:33:10
所以我尝试使用我的摄影网站的jQuery延迟插件，在用户向下滚动页面时延迟加载我的图像。问题是，插件是一次加载所有的图像，而不是像它应该做的那样，当它们出现在视图中时。有没有人有这个插件的经验，或者知道是怎么回事？你可以在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/上看到这个插件的文档。
我确实让它工作了一分钟，但后来我改变了一些东西，它再次开始加载所有图像。所以我把它改回来了，但仍然没有区别。更改只是通过注释掉第二列和第三列中的图像，将图像限制在一列中。此外，由于某些原因，只有当我将网站上传到我的实时服务器时，延迟加载才会起作用。
回答 1
Stack Overflow用户
发布于 2019-10-08 07:25:42
根据测试站点的说法，插件工作正常，并且在第一次加载时延迟加载图像。您可能会感到困惑，因为在第一次加载之后，图像已经保存在浏览器的缓存中，所以它们会立即加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58276765
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号