jQuery/PHP - 懶惰的加載畫廊不斷嘗試獲取圖像，即使他們已經全部加載

我有一個圖像庫，顯示一個div內每行一個圖像。我不希望下一個圖像加載到視口的邊緣（以節省服務器資源）。所有圖像在相同的文件夾中按順序命名（img/1.jpeg，img/2.jpeg，img/3.jpeg，...）。jQuery/PHP - 懶惰的加載畫廊不斷嘗試獲取圖像，即使他們已經全部加載

我正在使用修改後的jQuery插件來完成此操作，但在目錄中的所有圖像都已加載後，它仍會繼續嘗試獲取下一張圖像。 這是我在這裏遇到麻煩的最後一條陳述。

如何在目錄中最後一張圖片加載後停止運行功能？

<?php 
// Count total number of images in the directory 
$directory = "img/"; 
$totalImages = count(glob("" . $directory . "*.jpeg")); 
?> 

<script type="text/javascript"> 
$('document').ready(function(){ 
    scrollalert(); 
}); 
function scrollalert(){ 
    var scrolltop=$('#scrollbox').attr('scrollTop'); 
    var scrollheight=$('#scrollbox').attr('scrollHeight'); 
    var windowheight=$('#scrollbox').attr('clientHeight'); 
    if(scrolltop>=(scrollheight-(windowheight))) 
    { 
     // Fetch next image 
     var nextImgNum=$('#content img').length + 1; 
     $('#content').append('<img src=\"book1/'+nextImgNum+'.jpeg\" /><br />'); 
     updatestatus(); 
    } 

    if(nextImgNum<=<?php echo $totalImages ?>) 
    { 
     setTimeout('scrollalert();', 0); 
    } 
} 

</script>

優化這個腳本的任何提示都十分讚賞太:)

來源

2010-11-15 Sam Nabi

該腳本效率非常低，並且使瀏覽器非常繁忙。你基本上處於一個嚴密的循環中，檢查用戶是否滾動頁面，並通過使用setTimeout（）來避免瀏覽器的腳本超時。這不是我會推薦的。你肯定可以解決這個問題，但爲什麼不使用jQuery Lazy Load插件呢？

http://plugins.jquery.com/project/lazyload

來源

2010-11-15 19:13:51

該插件在現代瀏覽器中不起作用。無論如何，這些圖像都會在後臺加載。 – 2010-11-15 21:03:01

在解析HTML時，它看起來像現代瀏覽器排隊加載 URL。因此，當jQuery Lazy Load插件執行時，瀏覽器已經加載（或準備加載）它們。我通過要求延遲加載的圖像指定中的URL來解決Lazy Load插件中的問題。更新可以在這裏找到：https://github.com/JamesKovacs/jquery_lazyload即使你選擇不使用Lazy Load插件，你應該研究它如何在沒有setTimeout（func，0）調用的情況下完成延遲加載。 – 2010-11-15 22:53:53

James，你有一個使用* original *屬性的lazyload插件的工作示例嗎？我試圖做到這一點，但我堅持在加載圖像：http://s194239704.onlinehome.us/bookneto/lazyload/ – 2010-11-16 20:31:30

從<更改比較運算=到<。

來源

2010-11-15 19:08:05

沒有骰子... Firefox只是加載第一個圖像，然後停止。鉻，奇怪的是，一次加載14到20個圖像，然後不會比這更進一步。 – 2010-11-15 21:08:09

小心的lazyload插件，它不與WebKit的正常工作。
請參閱Bug 6656（此錯誤也可能與您的問題有關）和Lazyload的項目頁面

來源

2010-11-15 23:12:56 CamelBlues

jQuery/PHP - 懶惰的加載畫廊不斷嘗試獲取圖像，即使他們已經全部加載

回答

相關問題