如何使用 jQuery 插件为手机设计图像/视频的延迟加载？

在本文中，我们将学习使用 jQuery Lazy Load XT 插件为面向移动的应用程序设计图像或视频的加载。

先决条件：从链接中下载预编译所需的库文件并将其保存在您的工作文件夹中以供以下实现。

示例 1：下面的示例演示了使用 HTML 和上述 jQuery 插件对图像进行 ajax 加载。

HTML

    
        
  
        
        
        
        
        
        
            $(window).on("ajaxComplete", function () {
                setTimeout(function () {
                    $(window).lazyLoadXT();
                }, 50);
            });
        
        
            body {
                text-align: center;
            }
        
    
    
        
            
                Images loading using AJAX
  
            
              

                
                    Reload
                
            
  
            
                  

                
  
  
                  

                
  
  
                  

                
  
  
                  

                
  
  
                  

                
  
  
                  

                
  
            
        
    

输出：

示例 2：下面的示例演示了使用插件无限滚动图像列表。

html

    
        
        Infinite scroll
        
        
        
        
        
        
            #marker-end {
                height: 30px;
                background: url(images/loading.gif) no-repeat 50% 50%;
            }
        
        
            $(document).ready(function () {
                if (!$.lazyLoadXT.forceLoad) {
                    $("#marker-end")
                        .on("lazyshow", function () {
                            $.ajax({
                                url: "myinfinite.htm",
                                dataType: "html",
                            }).done(function (responseText) {
                                
                                // Add new elements
                                $("#divID").append($("<div>").append($.parseHTML(responseText))
                                                   .find("#infinite").children());
                                // Process added elements
                                $(window).lazyLoadXT();
                                $("#marker-end").lazyLoadXT({
                                    visibleOnly: false,
                                    checkDuplicates: false,
                                });
                            });
                        })
                        .lazyLoadXT({ visibleOnly: false });
                }
            });
        
    
    
        
            
                Infinite scrolling.
  
            
            
                  

  
  
                  

  
  
                  

  
  
                  

  
  
                  

  
  
                  

  
            
            
        
    

输出：