Question

所以，我正在这个摄影作品集网站上为一个真正希望她的照片在浏览器窗口中出现时淡入的客户。所以我做了一些研究，似乎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以我想要的方式运行的建议或者对图像淡化效果的另一种方法的推荐都将非常感激。万分感谢！

Answer 1

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

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

延迟加载水平滚动jQuery

1 个答案: