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

回答

相關問題