无法让 Isotope JS 计算每个图像的高度和宽度值
我正在使用 Isotope JS 排序和排列图像，它工作正常，除了页面加载时脚本不会运行，直到所有图像加载完毕。在 Isotope JS 帮助页面上，它指出提供高度和宽度值将为脚本提供在不加载图像的情况下排列项目所需的信息。我这样做了，但脚本仍然只有在所有图像加载后才会被触发。我是 JS 编码新手，所以我试图找到我错过的内容。
<script src="js/jquery.isotope.min.js"></script>
$(window).load(function(){
$('#container').isotope({
itemSelector : '.item'
});
});
var $container = $('#container');
$('.filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
<script>
$(window).load(function(){
$('#container').isotope({
itemSelector : '.item'
});
});
var $container = $('#container');
$('.filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
I'm using the Isotope JS sort and arrange images and it's working fine apart from when the page loads the script doesn't run until all the images have loaded. On the Isotope JS help page it states providing the high and width values will give the script the information it needs to arrange the items without the images loading. I did this but the script is still only being triggered after all the images have loaded. I'm new to JS coding so I was trying to find what I had missed.
<script src="js/jquery.isotope.min.js"></script>
$(window).load(function(){
$('#container').isotope({
itemSelector : '.item'
});
});
var $container = $('#container');
$('.filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
$(window).load(function(){
$('#container').isotope({
itemSelector : '.item'
});
});
var $container = $('#container');
$('.filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
<script>
$(window).load(function(){
$('#container').isotope({
itemSelector : '.item'
});
});
var $container = $('#container');
$('.filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
需要提供内联高度和宽度，但您的代码也仅在 imagesLoaded 插件触发 load() 事件后运行。
您需要做的是将代码更改为由jQuery的ready()函数触发，如下所示
： 您可以在此处查看有关
Isotope 中包含的 imagesLoaded 插件的更多信息。
Providing inline height and width is required but your code also runs only once the imagesLoaded plugin fires the load() event.
What you need to do is change your code to be triggered by jQuery's ready() function like this:
instead of
You can see more about the imagesLoaded plugin included in Isotope here.
插件创建者自己写道“这是因为 Isotope 在布置所有项目之前需要知道项目的确切宽度”需要帮助反转函数；恢复 div 的动画扩展 也许您使用的图像太大或太多或两者兼而有之？当错误地链接到具有原始尺寸图像的文件夹而不是其网站等效图像时，出现同样的问题。
Plugin creator himself writes "This is because Isotope needs to know the exact width of an item before it lays out all the items" here Need help reversing a function; reverting an animated expansion of a div Maybe the images you're using are way too large or too plentiful or both? Had same issue when mistakingly linking to folder with original size images instead of their website equivalents.