个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
27
4
$(document).ready(function(){
// SECTION 1
// Seting up the element which contains the divs that will be used in the Masonry
var $galWrapper = $('#gallery-wrapper');
$galWrapper.imagesLoaded(function(){
$galWrapper.fadeIn(1000) // #gallery-wrapper's CSS 'display' property is 'none' when web page is opened. Then it fades in after the images are loaded
.masonry({
itemSelector: '.picture-wrapper',
transitionDuration: 0
});
});
// SECTION 2: SCROLL PAGINATION
var $doc = $(document);
var $win = $(window);
var isFetchingPics = false; // boolean variable to see if script is fetching items from the server
var imgFirst = 0;
$win.scroll(function(){
var $scroll = $win.scrollTop();
var $docHeight = $doc.height();
var $winHeight = $win.height();
// If-statement triggers when user reaches near bottom of page
if( $scroll >= ($docHeight - $winHeight - 800) ){
if(!isFetchingPics){
isFetchingPics = true;
imgFirst = imgFirst+20; // This tells the server-side script which row to start from
$.get(
'index.php',
{
img_first: imgFirst
},
function(responseHTML){
$responseHTML = $(responseHTML); // responseHTML is something like '<div id="10" class="picture-wrapper"><img src="http://i.imgur.com/whatever.jpg"></div> <div id="11" class="picture-wrapper"><img src="http://i.imgur.com/some-picture.jpg"></div>' ...
// Here's where I'm getting trouble, I think. Even though this whole thing is wrapped in 'imagesLoaded', the DIVs that contain the pics still overlap each other on load.
// However, if I wait for all the images to load, and reload the page, then there is usually no overlap when images get appended
$galWrapper.imagesLoaded(function(){
$galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload'); // I've tried both 'reload' and 'reloadItems', but nothing works
isFetchingPics = false;
});
}
);
};
};
});
}); // DONE: $(document).ready
好的，问题来了:当我向下滚动时，我的脚本向服务器发送一个 GET 请求并检索一堆 DIV 以放入 #gallery-wrapper .我把 .append 包裹起来在 .imagesLoaded 中发挥作用但是在网页第一次加载时图片仍然相互重叠。
但如果我在浏览器中点击刷新，然后再次向下滚动，那么图片就可以正常加载了——没有重叠。我认为 'reload'此行 ( $galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload');) 上的部分会使脚本重新加载图像，从而停止重叠，但仍然存在重叠。我也尝试使用 'reloadItems' , 但这也没有解决问题。
为什么？我如何才能使图片第一次正确加载？
我的浏览器是 FireFox v27.0.1
编辑:这是我的 <head> 中的内容区域。 Masonry 和 ImagesLoaded 都是 v3.1.4
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./css/style.css?v=0.1"> <!-- Site CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <!-- jQuery tools -->
<script src="./js/imagesloaded.pkgd.min.js"></script> <!-- imagesLoaded -->
<script src="./js/masonry.pkgd.min.js"></script> <!-- Masonry -->
<script src="./js/script.js?v=0.1"></script> <!-- Site script -->
</head>
编辑 2:重叠图像的问题已解决我改变了这个...
$galWrapper.imagesLoaded(function(){
$galWrapper.append($responseHTML)
.masonry('appended', $responseHTML, 'reload);
});
对于这个...
$galWrapper.append($responseHTML).imagesLoaded(
function(){
$galWrapper.masonry('appended', $responseHTML);
isFetchingPics = false;
}
);
出于某种原因，将 $.append()外面的方法.imagesLoaded停止重叠。我现在有一个新问题，新加载的图像在进入砌体形式之前加载到左侧的单个列中。但至少重叠问题得到了解决。
最佳答案
你看过 github 上的这个帖子了吗？
https://github.com/desandro/masonry/issues/374
正如我所读，它正在处理您遇到的相同问题，通过过滤获取结果来修复它。
此外，在 github 上有一个关于使用 ajax 附加的线程:
关于jquery - 砌体 : DIVs overlap even after I add imagesLoaded and 'reload' ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22444770/
27
4
0
请帮助修复算法并防止点击提交后重新加载:我的网站必须检查，用户是否曾经输入过昵称。如果他有，那么网站必须显示他的名字，如果没有，则要求输入。如果用户决定更改它，他将单击“重置用户名”。 点击“重置”后
我最近在 Chrome 中发现了这个新功能: 我可以找出选项 1 和选项 3 之间的区别，选项 2 可能介于两者之间，但我在任何地方都找不到更精确的信息。 有人知道这 3 个选项的确切行为吗？ 最佳答
当我在模拟器上开发时一切都很好，但现在我正处于我的应用程序几乎完成但必须在真实设备上更改一些视觉小东西的阶段。出于这个原因，我希望有与在模拟器上测试时相同的选项:实时重载或热重载。 这是我摇动设备时的
所以，我在我的项目中使用了 gulp。 我使用 gulp-compass 来编译我的 Assets 。 而且，我的任务之一是监视开发人员的任务。像这样: gulp.task('live', funct
在 lein REPL 中有一个奇怪且非常烦人的行为，更不用说经常耗时了。 即，如果我将 :reload-all 与命名空间一起使用，并且它所需的命名空间有错误，则 repl 不会告诉我任何相关信息。
我需要使用 JavaScript 刷新页面。我尝试了 window.location.reload() 和 location.reload()。两者都在工作并重新加载页面。我应该使用哪一个？ 最佳答案
我知道这很愚蠢，但我真的想了解 Location.reload() 和 window.location.reload() 之间的区别； 如果我使用 location.reload() 会发生什么？如果
In this plunk你有两个 ui-router 状态，一个父状态和一个子状态。当通过单击链接调用子级时，由于它具有选项 reload: true，因此它始终会重新加载。这很好，但问题是父状态也
当我用 expo 打开开发者菜单时，它显示: 实时重新加载不可用 和 热重载不可用 我已根据需要登录，我也尝试过使用二维码加载应用程序，但没有帮助。 .expo/settings.json: {
为什么 Live Reload、Hot Reload 和 Remote Debugger 都不可用？我试过了 重新加载 JS 包 重启模拟器 重新启动打包器 重新启动打包程序并清除缓存 重置模拟器 重
我在 Controller 中有这个: $scope.foo = function(){ return RolesService.remove({ data: rol
Angular.js 中的 $window.location.reload() 和 $route.reload() 有什么区别？ 我已经使用了这两个东西，但它们的工作进度相同。 谁能解释一下区别？ 最
只是一个简短的问题。我想知道是否有一个选项或开关可以启用重新加载按钮下的“硬重新加载”和“清空缓存和硬重新加载”选项而无需打开devtools，以便它们始终弹出，即使devtools没有开放。 我知道
我已经使用 flutter_web 有一段时间了，从来没有真正质疑过它在按下“热重载”时总是重新启动整个应用程序，但自从现在 flutter_web 被合并到主要的 flutter channel 我
例如，我希望导航中的此更改能够重新加载状态: #/detail/1 #/detail/2 但是我不希望这个导航重新加载状态: #/detail/1?search=blah #/detail/1?sea
遵循 uvicorn-gunicorn-fastapi-docker 中的文档我应该通过运行来运行我的图像: docker run -d -p 80:80 -v $(pwd):/app myimage
我看过很多关于 的帖子和出版物实时重载 , 热重载 , 和 热模块更换 ，指的是在 Web 客户端/FE 层工作时，在浏览器中立即反射(reflect)代码更改的不同做法。 我对这些术语指的是什么有一
我有一个脚本可以检查两个或多个选项是否相似。如果它们相似，我会阻止提交该页面。它有效，但仅当我在显示警报消息后刷新页面时才有效。如果我选择了一个合适的选项，除非刷新页面，否则错误警报仍保留在内存中。
我有一个脚本，可以动态地将一些参数写入配置文件，我需要根据更新的参数从链接模块调用一些函数。但是，当我在配置文件上调用 reload() 时，有时我看不到任何变化。 以下代码片段将解释该场景: imp
我已连接到远程 mysql 服务器，但在几次连接不良(由于自动化)后，我被服务器阻止。我正在尝试解锁自己。 提示建议我执行mysqladinlush-hosts # This was done loc
我是一名优秀的程序员,十分优秀！