我最近遇到博客/網站最近只加載圖像時,他們滾動到可見的視口。然後它會淡入。有沒有jQuery ...甚至是WordPress的插件呢?延遲加載圖像時,他們進入視口
7
A
回答
7
有關JavaScript的好處之一是您可以查看源代碼並查看發生了什麼。查看源代碼後,我發現這一點:
2
1
你可以試試這個jQuery插件我寫了一個使用HTML註釋來延遲加載HTML的任意位,包括圖片:
jQuery Lazy Loader Plugin Page
下面是一個例子:
<pre class=」i-am-lazy」 ><!–
<img src=」some.png」 />
–></pre>
<pre class=」i-am-lazy」 ><!–
<div>Any, html css img background, whatever. <img src=」some.png」 /> </div>
–></pre>
<script type=」text/javascript」 src=」jquery.lazyloader.js」 ></script>
<script type=」text/javascript」 >
$(document).ready(function()
{
$(’pre.i-am-lazy’).lazyLoad();
});
</script>
所以基本上你換你想偷懶負載與佔位符標記並和內部HTML註釋的內容。當佔位符在視口中變爲可見時,它將被替換爲註釋內的html字符串。
您可以對佔位符使用任何標記,但是我喜歡pre,因爲只有裏面只有註釋才呈現爲0維。
希望這有助於! @MW_Collins
相關問題
- 1. 延遲加載? /只在視口中可見時加載圖像
- 2. AngularJS延遲視圖加載
- 3. Javascript延遲圖像加載
- 4. 延遲加載UICollectionView圖像
- 5. 延遲加載PhotoLibrary圖像
- 6. ajax加載圖像延遲?
- 7. 延遲加載滾動圖片和「進入視圖」
- 8. android圖庫視圖「延遲」與延遲圖像加載適配器
- 9. UScrollView延遲加載卸載視圖
- 10. 在地圖視圖中延遲加載?
- 11. 僅當元素進入視口時纔會加載圖像
- 12. iOS:UITabBarController - 延遲加載項目視圖
- 13. 圖像不延遲加載和緩存
- 14. 在ImageSpan中延遲加載圖像
- 15. 在UIScrollView中延遲加載圖像
- 16. 使用jQuery加載延遲圖像
- 17. UITableView - 延遲加載聯繫人圖像
- 18. 在Vue/Laravel中延遲加載圖像
- 19. 在jQuery Mobile中延遲加載圖像
- 20. 停止延遲加載圖像?
- 21. UISearchDisplayController和圖像延遲加載
- 22. uwp延遲加載圖像源
- 23. 在桌面視圖中加載圖像的延遲
- 24. 延遲加載多個滾動視圖和動態圖像
- 25. 延遲加載與淡入
- 26. 添加子視圖,延遲?
- 27. 延遲添加視圖
- 28. 延遲加載iPhone圖片
- 29. 延遲加載圖像有時只有作品,有時它不
- 30. 加載時的延遲Default.png
似乎真的很討厭用戶... – Glennular 2010-05-06 20:55:16
雙重欺騙!我獨自一人在SO上回答了這個問題兩次。 – 2010-05-06 21:00:53
Dupe 1 http://stackoverflow.com/questions/1464968/load-content-as-an-element-scrolls-into-view – 2010-05-06 21:01:54