asp.net Jquery图片延迟加载-阿里云开发者社区

开发者社区> 灵动生活> 正文

asp.net Jquery图片延迟加载

简介: 在电子商务网站中,由于网站图片请求数过多,导致首页加载速度较慢,通过图片延迟加载机制,让用户访问页面的时候,只加载当前屏幕所见内容的图片,从而减少用户请求数量,提升用户体验。  使用步骤: 1.引入Jquery类库和延迟加载类库:http://files.
+关注继续查看

在电子商务网站中,由于网站图片请求数过多,导致首页加载速度较慢,通过图片延迟加载机制,让用户访问页面的时候,只加载当前屏幕所见内容的图片,从而减少用户请求数量,提升用户体验。

 使用步骤:

1.引入Jquery类库和延迟加载类库:http://files.cnblogs.com/ywqu/Jquery%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD.rar

 

2.首先给图片img加属性original,并对其赋值为图片路径

3.在页面加以下代码

    <script language="javascript" type="text/javascript">
        $(
function () {
            $(
"img[original]").lazyload({
                placeholder: 
"../Images/Default/grey.gif",
                effect: 
"fadeIn"
            });
        });

    
</script>

4.最终效果

 


 

 

 

 


 

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
.net 图片上传
  ///       /// asp.net上传图片并生成缩略图      ///       /// HtmlInputFile控件      /// 保存的路径,些为相对服务器路径的下的文件夹      /// 缩略图的thumb      //...
795 0
jquery实现 图片延迟加载
图片延迟加载的大致的原理是,对于图片标签不是把图片的路径指定到src属性上,src属性指定一个非常小的空白图片,真正的图片地址设置到一个自定义的属性上,比如file,这样img标签就是这样:或者背景直接把一张小的空白图作为背景色。
775 0
AliOS Things内核延迟加载技术
在某些应用场景中,要求系统能快速启动。从用户视角看,只有当系统的应用逻辑开始运行的时候,才算启动完成。所以,启动时间并不只是从系统上电到操作系统完成初始化,还包从初始化完成到基本功能开始运行的时间。比如IP Camera要求从上电到第一帧稳定出图的时间小于250ms,这个启动时间包含了第一帧图像的采集与显示。
48 0
Hibernate延迟加载问题
Hibernate的映射配置单如下: DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.
727 0
利用 LibWebP-NET 解码与编码 WebP 格式图片
原文:利用 LibWebP-NET 解码与编码 WebP 格式图片 WebP 格式是谷歌开发并发展的一种最新的网络图片格式,具有压缩率高、解码快、免版权、开源等优点。 大部分先进的网页浏览器、图片浏览器都支持该格式,Windows用户可以通过安装 WebP Codec for Windows 在系统中查阅WebP图片。
1666 0
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
679 0
降低 80% 的读写响应延迟!我们测评了 etcd 3.4 新特性(内含读写发展史)
作者 | 陈洁(墨封)  阿里云开发工程师 导读:etcd 作为 K8s 集群中的存储组件,读写性能方面会受到很多压力,而 etcd 3.4 中的新特性将有效缓解压力,本文将从 etcd 数据读写机制的发展历史着手,深入解读 etcd 3.4 新特性。
1397 0
silverlight.net官方网站图片切换源码
下午心血来潮,想看看MS的开发人员是如何做silverlight的,出于学习目的把silverlight.net官方首页的图片轮换通过分析html源代码,下载xap后反编译了一下,分析后的源代码略作修改备份于此,希望对大家学习silverlight有用,请勿用于非法商业用途。
860 0
+关注
灵动生活
12年电商经验,8年IT项目管理经验,曾就职于中国第一家上市的B2C电商公司麦考林,擅长电商业务模式规划以及大型电商系统架构。创立闪酷&amp;酷客多小程序
203
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载