2 u011418599 u011418599 于 2016.03.01 19:25 提问

jquery 实现图片的缓加载功能

目标:实现界面上图片的按需加载——即缓加载;
难点:页面是使用模板生成的;
如下:

    <script type="text/html" >
    <div class="entry">
    <img src="../js/img/grey.gif" data-original="../js/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
    <img src="../js/img/grey.gif" data-original="../js/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
    <img src="../js/img/grey.gif" data-original="../js/img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
    <img src="../js/img/grey.gif" data-original="../js/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
    <img src="../js/img/grey.gif" data-original="../js/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
    <img src="../js/img/grey.gif" data-original="../js/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
    </div>
    </script>

<script type="text/javascript" src="../js/jquery.lazyload.min.js"></script>
  <script type="text/javascript" charset="utf-8">
     $$(function(){

        var LazyImg=$("#mainListBlock img.lazy");
        LazyImg.show().lazyload({container: $("#mainListBlock") });
    });
  </script>

2个回答

devmiao
devmiao   Ds   Rxr 2016.03.02 05:19
showbo
showbo   Ds   Rxr 2016.03.05 14:54

图片加载过浏览器会自动缓存,不需要你写代码做缓存

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
淘宝UWP--自定义图片缓存
一、应用场景 在淘宝应用首页,会有很多张图片,而这些首页图片不会经常改变,所以就需要缓存下来。这样就不必每次都从网络获取。 二、比较对象 1.系统缓存 对于系统缓存,我们不需要做什么处理。只需要把网络图片的URL赋值给Image控件就行了。这样系统就会在每次需要用到图片的时候,有限查找缓存里有没有之前下载好的。 2.自建
后台预加载(完善版),可加载多组图片
// loading var loading = document.getElementById("loading"); // loading页面,完毕就关闭 var loadBar = document.getElementById("loadBar"); // 加载条 var imgHrf = 'images/'; // 图片路径 var lo
jQuery UI 实现图片裁切功能
jQuery UI 实现图片裁切功能jQuery UI 实现图片裁切功能jQuery UI 实现图片裁切功能jQuery UI 实现图片裁切功能
Jquery实现延迟加载数据
(function($){ $.fn.hoverDelay = function(options){ var defaults = { hoverDuring: 150, outDuring: 1, hoverEvent: function(){ $.noop
Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
滚动到页面顶部加载 .mainDiv { width: 800px; border: solid 1px #f00; padding: 10px; } .item {
js结合jquery实现的ajax瀑布流加载实例
一.js代码 ajax函数//瀑布流数据 var getData = function (i,url,name){ $.post(url,{p:i},function(data){ if(data.status){ if(data.list !==null) { $(name).before(data.list), $
jQuery实现页面滚动图片按需加载(转载)
jquery scrolling
纯html jquery 实现加载效果(图片旋转)
index.html #triple_bg { position: fixed; left: 0px; top: 0px; background-color: #000; width: 100%; height: 100%; filter: alpha(opacity=60); opacit
jQuery Mobile (五) 预加载与 页面缓存
在开发移动应用程序时,对需要链接的页面进行预加载是十分有必要的。因为当一个链接的页面设置成预加载方式时,在当前页面加载完成之后,目标页面也被自动加载到当前文档中,用户单击就可以马上打开,大大加快了页面访问的速度。 在新建的HTML 页面中添加一个元素,将该元素的“href”属性值设置为“text.html”,并将“data-prefetch”属性值设置为“true”,表示预加载元
jquery实现瀑布流布局+无限下拉加载
每一步代码都有详细的注释,思路如下图所示: Document *{ margin: 0px; padding: 0px; } #contianer{ position: relative; font-size: 0;