zoukankan      html  css  js  c++  java
  • jquery图片延迟加载方案解决图片太多加载缓慢问题

    当在做一个图片展示站的时候,一个页面加载的图片过多会,如果服务器的带宽跟不上,明显会感觉到页面很卡,严重的浏览器也会崩溃,所以我推荐采用即看即所得的模式,当滚动到下一屏时才进行加载图片。

    注意:即便如此,也希望保持图片的大小不要太大,例如上传一个1M的图 在页面中显示,当有100张时,可想而知,100M的图片需要加载,所以推荐将图片进行裁剪或者压缩处理展示,特别是列表页!

    <script type="text/javascript" src="jquery.lazyload.js"></script>
    <script type="text/javascript" src="jquery.scrollstop.js"></script>
    $(function(){
        //延迟加载图片 
        $("img.lazy_load").lazyload({ 
          event: "scrollstop", //滚动加载
          effect : "fadeIn" //淡入
        }); 
    })
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>
    <img src='1.jpg' class='lazy_load'/>

  • 相关阅读:
    C# 解析js方法,并调用js方法
    Net 面试题_代码
    最近小项目总结 2013.5.3
    程序集生成失败 引用的程序集“Interop.MSScriptControl”没有强名称
    Vs 使用 (快捷等)
    Ildasm.exe 反汇编程序使用
    MSSQL_1
    [异常] Asp.net 中异常处理
    Net 面试题_理论(总结网上流传的)
    反射
  • 原文地址:https://www.cnblogs.com/guangxiaoluo/p/3336503.html
Copyright © 2011-2022 走看看