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

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

2023/03/11 12:24     创新屋收录网     已浏览360次



 在访问图片量较大的网站时,搜索引擎往往把所有图片都加载了,网站才算加载完毕。要是服务器空间不给力,那个等待时间是非常痛苦的。采用图片延迟加载后,用户进入网站只会加载其中的一部分,随着鼠标的滚动才加载剩余的部分,用户体验要好得多。

  接下来分享一个较简单的网站图片延迟加载效果。经测试有效。



















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