asp.net Jquery图片延迟加载

简介:

asp.net Jquery图片延迟加载

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

 使用步骤:

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.最终效果

 


 

 

 

复制代码
相关文章
|
7月前
|
存储 SQL 开发框架
分享88个ASP贺卡图片源码,总有一款适合您
分享88个ASP贺卡图片源码,总有一款适合您
45 2
|
7月前
|
SQL 存储 开发框架
分享107个ASP贺卡图片源码,总有一款适合您
分享107个ASP贺卡图片源码,总有一款适合您
60 1
|
7月前
|
SQL 开发框架 JavaScript
分享66个ASP贺卡图片源码,总有一款适合您
分享66个ASP贺卡图片源码,总有一款适合您
57 0
|
7月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
83 0
|
3月前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
153 67
|
7月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
7月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
112 1
|
6月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
6月前
|
存储 安全
【.NET Core】Lazy<T> 实现延迟加载详解
【.NET Core】Lazy<T> 实现延迟加载详解
113 0
|
7月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】