首页  »  站长资讯  »  网站优化

织梦网站图片Lazyload延迟加载懒加载技术

2023/03/11 12:24     老李站长网     已浏览379次
 在访问图片量较大的网站时,搜索引擎往往把所有图片都加载了,网站才算加载完毕。要是服务器空间不给力,那个等待时间是非常痛苦的。采用图片延迟加载后,用户进入网站只会加载其中的一部分,随着鼠标的滚动才加载剩余的部分,用户体验要好得多。
  接下来分享一个较简单的网站图片延迟加载效果。经测试有效。
01
02   
03   <head>
04   "utf-8">
05   Lazy Load 图片延迟加载
06   
08   
09   head>
10   
11   "lazy" data-original="img/pic1.jpg" width="765" height="574" alt="">
12   "lazy" data-original="img/pic2.jpg" width="765" height="574" alt="">
13   "lazy" data-original="img/pic3.jpg" width="765" height="574" alt="">
14   "lazy" data-original="img/pic4.jpg" width="765" height="574" alt="">
15   "lazy" data-original="img/pic5.jpg" width="765" height="574" alt="">
16   "lazy" data-original="img/pic6.jpg" width="765" height="574" alt="">
17   
18   
19   
24   
25   

所用到的页面代码及JS下载链接:链接:https://pan.baidu.com/s/1mRBzfW6c8_VknorG4nFHig 密码:5xlx
  图片延迟加载与AJAX列表排序使用注意事项
  本人在做测试的时候发现:如果同时运用AJAX异步排序加载,出现加载不出对应的图片。采用模板AJAX局部替换的方法实现,务必把下面代码放在对应的AJAX模板后面(比如:list_article.htm对应的list_article_ajax.htm模板的后面),请参考本站任意一个列表页面代码。

01
id="list">
02  
03
"listbox">
04  
05
    "e2">
06  
07
"data-list">
08  
09 {dede:list pagesize="5"}
10  
11
  • 12  
    14  
    15 [[field:typelink/]]
    16  
    18  
    19 "info">
    20  
    21 日期:[field:pubdate function="GetDateTimeMK(@me)"/]
    22  
    23 点击:[field:click/]
    24  
    25 好评:[field:scores/]
    26  
    27
    28  
    29

    "intro">[field:description/]...

    30  
    31
    32  
    33 {/dede:list}
    34  
    35
    36  
    37
    38  
    39
    40  
    41
    42  
    43
    44  
    45