jQuery图片延迟加载插件Lazy Load特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片延迟加载插件Lazy Load特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>jQuery图片延迟加载插件Lazy Load</title>
  <meta charset="utf-8">
  <meta name="keywords" content="jQuery插件,jQuery图片预加载,jQuery Lazyload,jQuery懒加载,jQuery图片懒加载,jQuery延迟加载" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->
  <style type="text/css">
    *{margin:0px;font-size:12px;}
	.container{margin:0 auto;width:800px;}
	.container img {
      margin-bottom: 10px;
    }
	h1{font-size:30px;height:50px;line-height:60px;}
  </style>
</head>
<body>
  <div class="container">
    
      <h1>jQuery图片延迟加载预加载插件Lazy Load</h1>
      <div id="container">
        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="665" height="474" alt="BMW M1 Hood"><br/>
        <img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="665" height="474" alt="BMW M1 Side"><br/>
        <img class="lazy img-responsive" data-original="img/viper_1.jpg" width="665" height="474" alt="Viper 1"><br/>
        <img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="665" height="474" alt="Viper Corner"><br/>
        <img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="665" height="474" alt="BMW M3 GT"><br/>
        <img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="665" height="474" alt="Corvette Pitstop"><br/>
      </div>
    </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.lazyload.js?v=1.9.0"></script>
  <script type="text/javascript" charset="utf-8">
  $(function() {
     $("img.lazy").lazyload({
         effect : "fadeIn"
     });
  });
  </script>
</body>
</html>

JS代码(Gruntfile.js):

module.exports = function(grunt){
	"use strict";
	grunt.initConfig({
	pkg:grunt.file.readJSON("package.json"),uglify:{
	options:{
	banner:"/*\n" + " * Lazy Load - jQuery plugin for lazy loading images\n" + " *\n" + " * Copyright (c) 2007-2013 Mika Tuupola\n" + " *\n" + " * Licensed under the MIT license:\n" + " * http://www.opensource.org/licenses/mit-license.php\n" + " *\n" + " * Project home:\n" + " * http://www.appelsiini.net/projects/lazyload\n" + " *\n" + " * Version:<%= pkg.version %>\n" + " *\n" + " */
\n"}
,target:{
	files:{
	"jquery.lazyload.min.js":"jquery.lazyload.js","jquery.scrollstop.min.js":"jquery.scrollstop.js"}
}
}
,watch:{
	files:["*.js","!*.min.js","test/spec/*Spec.js"],tasks:["test"],}
,jshint:{
	files:["*.js","!*.min.js","test/spec/*Spec.js"],options:{
	jshintrc:".jshintrc"}
}
,jasmine:{
	src:["jquery.lazyload.js"],options:{
	helpers:"test/spec/*Helper.js",specs:"test/spec/*Spec.js",vendor:["test/vendor/jquery-1.9.0.js","test/vendor/jasmine-jquery.js"]}
}
}
);
	grunt.loadNpmTasks("grunt-contrib-uglify");
	grunt.loadNpmTasks("grunt-contrib-jshint");
	grunt.loadNpmTasks("grunt-contrib-jasmine");
	grunt.loadNpmTasks("grunt-contrib-watch");
	//grunt.registerTask("test",["jshint","jasmine"]);
	grunt.registerTask("test",["jshint"]);
	grunt.registerTask("default",["test","uglify"]);
}
;

附件:下载该文件资源,减少时间成本(增值服务)