页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jQuery Smartify根据分辨率延迟加载图片增强版插件

图像相册 布局 HTML我帮您 1年前  次浏览
jQuery Smartify根据分辨率延迟加载图片插件,增强Web应用的加载时间和加载图像,调用Ajax,在设备视图中可见时加载图片。

它具有jQuery lazyload充分的能力

特点
提高你的网络应用程序加载时间
多元素支持
动态加载的内容通过Ajax调用
无限的负荷项目,最好的电子商务网站
加载图像时可见视口
负载动态图像不同的DPI支持
切换,添加或删除元素类
用户定义的回调函数

HTML5 History API(WIP)

<div class="row">
<div class="col-xs-6 col-sm-4">
    <!-- LOAD HIGH RES IMAGES IF devicePixelRation is higher than 1 -->
    <img class="img-responsive smartify" sm-src="http://static.html580.com/640/360/nature/1"
     sm-src-1-5x="http://static.html580.com/960/540/nature/1"
     sm-src-2x="http://static.html580.com/1280/720/nature/1"
     sm-src-3x="http://static.html580.com/1920/1080/nature/1">
</div>
<div class="col-xs-6 col-sm-4">
    <img class="img-responsive smartify" sm-src="http://static.html580.com/640/360/nature/2">
</div>
<div class="col-xs-6 col-sm-4">
    <img class="img-responsive smartify" sm-src="http://static.html580.com/640/360/nature/3">
</div>
</div>

<div class="row">
    <div class="col-xs-6 col-sm-4">
        <img class="img-responsive smartify" sm-src="http://static.html580.com/640/360/nature/4">
    </div>
    <div class="col-xs-6 col-sm-4">
        <img class="img-responsive smartify" sm-src="http://static.html580.com/640/360/nature/5">
    </div>
    <div class="col-xs-6 col-sm-4">
        <img class="img-responsive smartify" sm-src="http://static.html580.com/640/360/nature/6">
    </div>
</div>

<!--
Elements to Smartify
-->
<img class="smartify" sm-src="/static/path/to/img.png">

...

<!-- JavaScript before </body> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dist/jquery.smartify.min.js"></script>
<script>
jQuery(function($) {
  $('.smartify').smartify(); // "smartify"
});
</script>

相关链接

发表评论