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

注意:即便如此,也希望保持图片的大小不要太大,例如上传一个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'/>

jquery图片延迟加载方案解决图片太多加载缓慢问题的更多相关文章

  1. 解决Typecho Gravatar头像加载缓慢的问题

    前言 Typecho评论默认使用的是Gravatar头像,但因为Gravatar网站总是被墙,导致页面加载被拖慢,而且加载半天也还是个裂图,太影响心情,所以我们可以不使用Gravatar头像,换成另一 ...

  2. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  3. UIImage加载图片的方式以及Images.xcassets对于加载方法的影响

    UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...

  4. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  5. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  6. html网页引用中文字体,解决加载缓慢办法

    [ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm ...

  7. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  8. 解决 Visual Studio 符号加载不完全问题

    解决 Visual Studio 符号加载不完全问题 工具 - 选项 - 搜索 "符号" - 选上服务器 | 加载所有符号, 之后符号就会显示完全

  9. 解决页面初始化vue加载代码问题

    <style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...

随机推荐

  1. __metaclass__ 实现单列模式

    class Singleton(type): """Singleton. @see: http://stackoverflow.com/questions/6760685 ...

  2. 第10章-Vue.js 项目实战

    一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...

  3. weUI框架在github下载地址

    1.公众号样式UI库的下载地址: https://github.com/Tencent/weui 2.微信小程序UI库的下载地址:https://github.com/Tencent/weui-wxs ...

  4. Centos7远程桌面 vnc/vnc-server的设置

    Centos7与Centos6.x有了很大的不同. 为了给一台服务器装上远程桌面,走了不少弯路.写这篇博文,纯粹为了记录,以后如果遇到相同问题,可以追溯. 1.假定你的系统没有安装vnc的任何软件,那 ...

  5. Nginx模块Lua-Nginx-Module学习笔记(二)Lua指令详解(Directives)

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...

  6. 关于File 文件操作

    1.通过Context.getExternalFilesDir()方法可以获取到 SDCard/Android/data/你的应用的包名/files/ 目录,一般放一些长时间保存的数据2.通过Cont ...

  7. 【学习笔记】初识FreeMarker简单使用

    楔子: 之前在和同事讨论,同事说“jsp技术太古老了,有几种页面技术代替,比如FreeMarker.Velocity.thymeleaf,jsp快废弃了……”云云.我这一听有点心虚……我在后端部分越刨 ...

  8. swiper隐藏再显示出现点击不了情况

    //初始化swiper var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextBut ...

  9. spring boot使用自定义配置的线程池执行Async异步任务

    一.增加配置属性类 package com.chhliu.springboot.async.configuration; import org.springframework.boot.context ...

  10. [转载].net程序集自动生成版本号

    原文:http://hi.baidu.com/bcbgrand/item/a74a7ba71c3b0ea928ce9dce .net程序版本号的格式是4个十进制数字 比如 2.5.729.2 依次是 ...