Lazy Load水平滚动jQuery

因此，我正在为这个摄影作品集网站开发一个客户，他们真的希望她的照片在浏览器窗口中显示时淡入。所以我做了一些研究，看起来像jquery插件lazyload将是完美的。问题是，她也真的希望她的照片是水平滚动，并且似乎lazyload只想在垂直滚动网页上工作。我搜索周围，显然lazyload应该在侧滚动的div工作与此脚本：Lazy Load水平滚动jQuery

$("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>

这里是一个temporary link to the website in progress，如果你想看到它的当前状态lazyload插件的功能（或缺少的功能相当）。

任何有关使lazyload以我想要的方式工作的建议或者对于图像淡入淡出效果完全采用另一种方法的建议将非常感谢。万分感谢！

来源

2013-02-14 MonkeyTyping

可能是这将帮助你...... http://stackoverflow.com/questions/444730/javascript-lazy-load-images-in-horizontal-div – Kingk 2013-02-14 09:05:19

哦是的，我的意思是补充说，我确实看到了这个stackoverflow条目，它不适合我。这和这个：http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html是我能找到关于让lazyload水平工作的唯一两个资源，他们都没有改变任何东西。 – MonkeyTyping 2013-02-14 18:42:37

你是说宽容器演示页面不适合你？哪个浏览器？ – 2013-02-14 19:32:21

您的图像缺少宽度和高度属性。懒惰负载无法正常工作，没有它们。在不知道宽度和高度的情况下，当事件触发时，浏览器无法知道图像应该在布局中的位置。正确的图像标记看起来像以下：

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

来源

2013-02-14 19:36:33

只需删除容器参数。与演示页面中的方法相同：http://www.appelsiini.net/projects/lazyload/enabled_wide.html 如果答案解决了问题，则将其标记为已接受。 – 2013-02-14 20:16:38

将hight和width属性添加到工作的图像！现在，如果我想做“溢出：隐藏”;并省略div的宽度属性，以便水平滚动条将在浏览器窗口中是否有办法让lazyload在这种情况下工作？而不是添加脚本（{container：$（“＃content”），}）它就像（{container：$（“body”）}）也许？下面是我谈论的情况的一个例子：thefuhrl.com/jennaSpitz2/album01.html – MonkeyTyping 2013-02-14 20:16:48

啊，我从来没有在某种程度上遇到过“广泛”演示的页面。万分感谢！你真棒！ – MonkeyTyping 2013-02-14 20:19:19

Lazy Load水平滚动jQuery

回答

相关问题