3

所以，我正在为一个真正希望她的照片在浏览器窗口中出现时淡入淡出的客户制作这个摄影作品集网站。所以我做了一些研究，看起来 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

任何有关让lazyload 以我想要的方式运行的建议或对图像淡入效果的另一种方法的推荐将不胜感激。万分感谢！

4

1 回答 1

0

您的图像缺少宽度和高度属性。没有它们，延迟加载将无法正常工作。document.ready在不知道宽度和高度的情况下，浏览器无法知道事件触发时图像在布局中的位置。正确的图像标签如下所示：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
于 2013-02-14T19:36:33.920 回答