jquery瀑布流滚动加载图片
基础概念： 瀑布流布局是一种页面布局方式，它将页面元素按照不同列进行排列，使得每一列的高度尽可能相近，形似瀑布。当用户滚动页面时，会动态加载更多的图片或其他内容，这种技术被称为滚动加载或无限滚动。
优势：
- 提供流畅的用户体验，用户无需翻页即可查看更多内容。
- 节省服务器资源，因为只在需要时才加载内容。
- 可以提高页面的参与度，因为用户更倾向于滚动查看更多内容。
类型：
- 基于列的瀑布流：内容按照固定数量的列进行排列。
- 基于行的瀑布流：内容按照固定数量的行进行排列，较少见。
应用场景：
- 图片分享网站
- 社交媒体动态展示
- 新闻网站的文章列表
- 电商网站的产品展示
遇到的问题及原因：
- 图片加载错位：由于图片尺寸未知，加载时可能导致布局错位。
- 性能问题：大量图片同时加载可能导致页面卡顿。
- 滚动加载不流畅：用户滚动时可能感觉到卡顿或加载延迟。
解决方案：
- 图片加载错位：
- 使用占位符预设图片尺寸。
- 图片加载完成后重新计算布局。
$(window).on('load', function() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry('layout');
});
});- 性能问题：
- 使用懒加载技术，只加载可视区域内的图片。
- 图片压缩和优化，减少文件大小。
$('.lazy').lazyload({
effect : "fadeIn"
});- 滚动加载不流畅：
- 使用节流函数控制滚动事件的触发频率。
- 异步加载数据，避免阻塞主线程。
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
$(window).scroll(throttle(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
loadMoreContent();
}
}, 200));示例代码： 以下是一个简单的jQuery瀑布流滚动加载图片的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流滚动加载</title>
<style>
#masonry {
column-count: 3;
column-gap: 1em;
}
.item {
break-inside: avoid;
margin-bottom: 1em;
}
.item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="masonry">
<!-- 图片项将通过JavaScript动态添加 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script>
let page = 1;
function loadMoreContent() {
$.ajax({
url: 'get_images.php', // 假设这是获取图片数据的API
data: { page: page },
success: function(data) {
data.forEach(function(imgSrc) {
$('#masonry').append(`<div class="item"><img class="lazy" data-original="${imgSrc}"></div>`);
});
page++;
$('.lazy').lazyload();
}
});
}
$(window).on('load', function() {
loadMoreContent();
$(window).scroll(throttle(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
loadMoreContent();
}
}, 200));
});
</script>
</body>
</html>在这个示例中，我们使用了jQuery和懒加载插件来实现瀑布流滚动加载图片的功能。通过AJAX请求获取图片数据，并在页面滚动到底部时动态加载更多内容。
相关·内容
3回答
我使用jQuery瀑布作为网格样式显示。colMinWidth: 260, autoresize: true});当附加项时，图像会重叠。jQuery瀑布附带了一个'reflow‘函数，它对容器中的所有项目进行排序。是否有一种方法，我只能运行
浏览 7提问于2014-05-02得票数 3
回答已采纳
19回答
问题A部分▉(100项悬赏，授予)
主要问题是如何使这个网站，加载更快。首先，我们需要阅读这些瀑布。感谢大家对瀑布读数分析的建议。从这里显示的各种瀑布图可以看出主要的瓶颈:PHP生成的缩略图。这个协议--从David建议的CDN加载的jquery --得到了我的赏赐，尽管我的站点总体上只快了3%，而且没有回答网站的主要瓶颈。这6幅图片是PHP生成的缩略图，很小，只有3~5kb，但加载速度相对较慢.请注意各种图形上的“时间到第一个字节”。在底部的JS (
浏览 37提问于2011-01-26得票数 182
回答已采纳
我知道如何在页面加载完成后才显示div。因此，目前jQuery瀑布订购了一些博客帖子，这些帖子以单独的div显示，每个帖子都有一个图像作为“缩略图”。然而，目前，当页面加载时，div被加载为全宽，然后看起来就像瀑布工程使它们适合网格。在我看来，这是不专业的。所以这个想法是，当瀑布函数发挥它的魔力时，只需显示一个加载图标，然后一旦完成，div就会显示出来。我已经将div
浏览 0提问于2014-03-14得票数 0
最近制作了该网站，并使用WP Fastest Cache和Clearfy插件优化加载速度。
浏览 3提问于2021-09-17得票数 0
回答已采纳
其要求是加载多个矩形jpg图像(96张图像，平均每个大小为7k )，并在其运行时显示在主页上。图像显示在一个由8x12行/列组成的网格中。我通过在javascript中设置'img‘的'src’属性来加载图像。分配给'src‘属性的url对于所有图像都是相同的，但是图像id是不同的。图像正在加载，但主要的问题是它们的加载速度不快，而且它们是一些按顺序加载意味着1、2、3、4.以此类推，但有些图像没有按顺序加载。我想提高这个页面的性能。在客户端接收&
浏览 3提问于2012-07-18得票数 1
4回答
加载大型图片库的最佳实践
、、、
我有一个出人意料的130张图片的画廊。最初，我的方法是在$(window).load();上淡入画廊谢谢你的建议！
浏览 0提问于2011-09-20得票数 1
回答已采纳
2回答
我是新的新的jQuery和移动网络应用程序开发，我想学习。
请指导我:如何创建可滚动的照片流；即，当我用手指交换图片时，它会显示一张新图片。换句话说，我可以用手指向前和向后移动图片。
浏览 2提问于2012-05-13得票数 0
3回答
使用c#缓存图像
、、
假设我有一个webapp，其中有1000张图片，<img src="something" />.这使得页面加载变慢，因为从请求中检索每个图像并将其显示给页面。
我的问题是，有没有其他方法可以最小化页面加载时间。
浏览 0提问于2014-09-11得票数 0
我的WordPress网站需要大量的时间来加载页面，这是我们中的许多人都面临的问题。我使用GT metrix检查我的WordPress页面，然后检查我的网站瀑布。有一件事，我看到超过一半的时间，我的网页是一个图片，没有上传到我的网站。我检查了一下，发现这是一张我没有在我的整个网页上使用的图片。另外，我也找不到这张图片在哪里使用。同样的事情发生在不同的页面上，不同的页面有不同的图像。我从我的媒体删除了一个图像，但现在当我检查G
浏览 2提问于2020-09-08得票数 0
我想做一个瀑布和无限滚动网站，它是很好的工作在pc上，但无限加载不工作在我的iPhone 6 Chrome。为什么？color:darkred;">{{price_promo}}</span>-->{{/result}}<script src="http://code.jquery.com/jquery-latest.
浏览 0提问于2015-03-25得票数 0
回答已采纳
因此，我正在创建一个程序，在运行时创建的图片框中显示来自互联网的图片。我为每一张图片创建一个图片框，一次屏幕上有6个图片框。但问题是，随着我向下滚动，越来越多的图片被加载，导致程序占用了大量的内存。因此，我想知道我如何“卸载”已经通过的图片，而不处理这些图片，这样我就可以再次上升并看到它们，而不会再次从see服务器上撤回它们(如果这是可能的话)。如果我是对的，这将减少内存消耗。我添加了这张图片，也许
浏览 2提问于2013-10-30得票数 0
回答已采纳
itemCount: 100, ),}
注意事项：我不想使用CustomScrollView，因为树的层次结构不会让我很好地利用它。
浏览 6提问于2022-05-25得票数 2
我一直是JQuery用户界面滑块的内容，有许多图片在div的内容，滑块的工作，但它是如此缓慢，因为它加载整个div的页面加载。如何将jquery ui滑块设置为按需加载意味着当我单击滚动或圆形按钮时。
所有的图片都在像img这样的文件夹中。我用的是这个".
浏览 2提问于2011-11-24得票数 0
回答已采纳
3回答
我在我的网站上有一个凌乱的背景，为了让它更容易阅读，我使用了这个背景属性：考虑到站点加载时间的目标，使用不透明的背景图像会更好吗
浏览 0提问于2012-05-05得票数 1
回答已采纳
2回答
不在视图中时隐藏图像
、、、、
我目前正在建立一个一页的网站，使用jQuery来动画滚动。我有一个使用jQuery Ajax嵌入的Tumblr博客。当博客加载了所有的图片时，它会滞后于滚动动画。为了帮助做到这一点，我不会加载博客，直到scrollTop在某个范围内或博客，甚至只有当用户不滚动至少半秒时才加载(以阻止它在滚动元素时触发)
然而，正如我所说的，一旦它被加载，图像就会导致卷轴变得滞后什么是最好的方式来隐藏图像(他们已经<
浏览 3提问于2012-12-17得票数 0
回答已采纳
3回答
我想预加载5-6图像，这样我就可以在用户滚动时显示它们(像facebook一样的自动加载滚动)。因此，当用户向下滚动时，图像将显示，而无需进一步加载。我在前面使用了以下CSS代码：{}
所以，在使用jQuery时，我让它们可见，它们没有加载就出现了。但问题是，页面加载时间增加了.我想要使用jQuery来加载图片，只有在<e
浏览 5提问于2013-06-18得票数 0
回答已采纳
这是我的网站用来调用图片的代码，它调用了大约100张图片，它们并不是一次性加载的，你需要在页面上坐大约5分钟才能加载它们。有人告诉我这可能是http缓冲区大小还是什么？无论如何，没有人愿意等待那么长时间的图片加载，那么我能做些什么(除了为50张图片的每个部分创建一个新的页面)来让它们都加载得更快，或者像剧透标签一样，只有你打开的那个才加载，但加载速度更快。
浏览 2提问于2015-05-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
