【发布时间】：2023-03-24 22:00:01
【问题描述】：
所以，我正在为一位真正希望她的照片在浏览器窗口中显示时淡入淡出的客户制作这个摄影作品集网站。所以我做了一些研究，看起来 jquery 插件lazyload 会很完美。问题是她也真的希望她的照片在水平滚动上，似乎lazyload 只想在垂直滚动的网页上工作。我四处搜索，显然lazyload 应该使用此脚本在侧滚动 div 中工作：
$("img").lazyload({
container: $("#container")
});
但它似乎没有做任何事情。
目前这是我的代码的样子：
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script>
$(function() {
$("#content img.fadeload").lazyload({
container: $("#content"),
placeholder : "images/white.jpg",
effect : "fadeIn",
effectspeed: 1000
});
});
</script>
<style>
#content {
font-size: 100%;
position: absolute;
height: 574px;
width: 750px;
margin-top: -277px;
margin-bottom: 0px;
padding-left: 240px;
padding-top: 0px;
padding-bottom: 0px;
top: 50%;
overflow-x: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="content">
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo01.jpg" alt="photo01"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo02.jpg" alt="photo02"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo03.jpg" alt="photo03"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo04.jpg" alt="photo04"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo05.jpg" alt="photo05"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo06.jpg" alt="photo06"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo07.jpg" alt="photo07"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo08.jpg" alt="photo08"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo09.jpg" alt="photo09"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo10.jpg" alt="photo10"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo11.jpg" alt="photo11"/>
<img class="fadeload" src="images/white.jpg" data-original="images/liveStuffHotStuff/photo12.jpg" alt="photo12"/>
</div>
</body>
如果您想查看lazyload 插件在其当前状态下的功能（或缺少功能），这里是temporary link to the website in progress。
任何关于让lazyload 以我想要的方式运行的建议或对图像淡入效果的另一种方法的推荐将不胜感激。非常感谢！
【问题讨论】：
-
也许这会对你有所帮助...stackoverflow.com/questions/444730/…
-
哦，是的，我想补充一点，我确实看到了那个 stackoverflow 条目，但它对我不起作用。那个和这个：appelsiini.net/projects/lazyload/enabled_wide_container.html 是我能找到的让lazyload 水平工作的仅有的两个资源，它们似乎都没有改变任何东西。
-
您的意思是宽容器演示页面不适合您？哪个浏览器？
-
demo在firefox下可以，chrome不行，其他浏览器我还没测试过。但据我所知，演示中的代码在应用于网站时不起作用，我试图将它放在 chrome 或 firefox 中。另外，作为旁注，我宁愿让包含图像的 div 没有宽度属性，而是让滚动条位于浏览器的底部而不是 div 的底部。像这样：thefuhrl.com/jennaSpitz2/album01.html
-
哪个版本的chrome？我对最新的 Windows 或 OSX chrome 没有问题。究竟什么不起作用？
标签： jquery fadein horizontal-scrolling lazy-loading