Picture-delay-loading-effect.rar

  • 杰杰杰杰ABC
    了解作者
  • PHP
    开发工具
  • 9KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 2
    下载次数
  • 2012-03-01 18:08
    上传日期
图片延时加载效果 很多商城图片太多 可以采用延时加载图片效果来实现加速网页打开速度
Picture-delay-loading-effect.rar
  • lazyload
  • js
  • LazyLoad.js
    12.3KB
  • CJL.0.1.min.js
    4.8KB
  • images
  • loading.gif
    721B
  • s.gif
    43B
  • Untitled-1.html
    8KB
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ImageLazyLoad</title> <script type="text/javascript" src="js/CJL.0.1.min.js"></script> <script type="text/javascript" src="js/LazyLoad.js"></script> <style> .floorMain{width:780px;height:300px;margin:100px auto 100px;} .floorMain a{background:url(images/loading.gif) center center no-repeat;float:left} .floorMain img{border:0;filter:alpha(opacity:0);opacity:0;} </style> </head> <body> <div id="mainContent"> <div class="floorMain"> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="台机总动员" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1rquFXfBwXXXXXXXX-195-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="卖家办公团采 发票联保" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1ll5AXj8iXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="家电每日惠" _lazysrc="http://img02.taobaocdn.com/tps/i2/T1n7mFXkxcXXXXXXXX-390-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="数码圣诞狂欢" _lazysrc="http://img04.taobaocdn.com/tps/i4/T19gmHXbxfXXXXXXXX-390-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="家电圣诞活动" _lazysrc="http://img01.taobaocdn.com/tps/i1/T1n59HXgNbXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="硬盘播放器" _lazysrc="http://img01.taobaocdn.com/tps/i1/T17HWFXalrXXXXXXXX-195-150.png" /> </a> </div> <div class="floorMain"> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="台机总动员" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1rquFXfBwXXXXXXXX-195-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="卖家办公团采 发票联保" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1ll5AXj8iXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="家电每日惠" _lazysrc="http://img02.taobaocdn.com/tps/i2/T1n7mFXkxcXXXXXXXX-390-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="数码圣诞狂欢" _lazysrc="http://img04.taobaocdn.com/tps/i4/T19gmHXbxfXXXXXXXX-390-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="家电圣诞活动" _lazysrc="http://img01.taobaocdn.com/tps/i1/T1n59HXgNbXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="硬盘播放器" _lazysrc="http://img01.taobaocdn.com/tps/i1/T17HWFXalrXXXXXXXX-195-150.png" /> </a> </div> <div class="floorMain"> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="台机总动员" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1rquFXfBwXXXXXXXX-195-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="卖家办公团采 发票联保" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1ll5AXj8iXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="家电每日惠" _lazysrc="http://img02.taobaocdn.com/tps/i2/T1n7mFXkxcXXXXXXXX-390-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="数码圣诞狂欢" _lazysrc="http://img04.taobaocdn.com/tps/i4/T19gmHXbxfXXXXXXXX-390-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="家电圣诞活动" _lazysrc="http://img01.taobaocdn.com/tps/i1/T1n59HXgNbXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="硬盘播放器" _lazysrc="http://img01.taobaocdn.com/tps/i1/T17HWFXalrXXXXXXXX-195-150.png" /> </a> </div> <div class="floorMain"> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="台机总动员" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1rquFXfBwXXXXXXXX-195-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="卖家办公团采 发票联保" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1ll5AXj8iXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="家电每日惠" _lazysrc="http://img02.taobaocdn.com/tps/i2/T1n7mFXkxcXXXXXXXX-390-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="数码圣诞狂欢" _lazysrc="http://img04.taobaocdn.com/tps/i4/T19gmHXbxfXXXXXXXX-390-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="家电圣诞活动" _lazysrc="http://img01.taobaocdn.com/tps/i1/T1n59HXgNbXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="硬盘播放器" _lazysrc="http://img01.taobaocdn.com/tps/i1/T17HWFXalrXXXXXXXX-195-150.png" /> </a> </div> <div class="floorMain"> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="台机总动员" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1rquFXfBwXXXXXXXX-195-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="卖家办公团采 发票联保" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1ll5AXj8iXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="家电每日惠" _lazysrc="http://img02.taobaocdn.com/tps/i2/T1n7mFXkxcXXXXXXXX-390-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="数码圣诞狂欢" _lazysrc="http://img04.taobaocdn.com/tps/i4/T19gmHXbxfXXXXXXXX-390-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="家电圣诞活动" _lazysrc="http://img01.taobaocdn.com/tps/i1/T1n59HXgNbXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="硬盘播放器" _lazysrc="http://img01.taobaocdn.com/tps/i1/T17HWFXalrXXXXXXXX-195-150.png" /> </a> </div> <div class="floorMain"> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="台机总动员" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1rquFXfBwXXXXXXXX-195-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="卖家办公团采 发票联保" _lazysrc="http://img04.taobaocdn.com/tps/i4/T1ll5AXj8iXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="家电每日惠" _lazysrc="http://img02.taobaocdn.com/tps/i2/T1n7mFXkxcXXXXXXXX-390-150.png" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="390" height="150" alt="数码圣诞狂欢" _lazysrc="http://img04.taobaocdn.com/tps/i4/T19gmHXbxfXXXXXXXX-390-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="家电圣诞活动" _lazysrc="http://img01.taobaocdn.com/tps/i1/T1n59HXgNbXXXXXXXX-195-150.jpg" /> </a> <a href="javascript:void(0)" rel='nofollow' onclick='return false;'> <img width="195" height="150" alt="硬盘播放器" _lazysrc="http://img01.taobaocdn.com/tps/i1/T17HWFXalrXXXXXXXX-195-150.png" /> </a> </div> </div> </body> </html> <script language="javascript"> function isIE() { //ie? if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1) return true; else return false; } var _ie = isIE(); (function(){ var row = $$("mainContent"), total = row.getElementsByTagName("img").length, cells = []; for (var i = 0, n = total; i < n; i++){ var img = row.getElementsByTagName("img")[i]; if(img){ //图片地址添加随机数避免缓存,可删除 img.setAttribute("_lazysrc", img.getAttribute("_lazysrc") + "?" + Math.random()); cells.push(img); } } var lazy = new ImagesLazyLoad({ container: window, mode: "vertical", holder: "images/s.gif", onLoad: function(img){ img.onload = function(){ showPic(this); } } }); function showPic(img) { var t = setInterval(function(){ var opacity = _ie?img.filters.alpha.opacity:img.style.opacity*1
评论
    相关推荐
    • 数据库课程设计
      一个数据库课程设计,access管理工具实现,用的是窗体!
    • 数据库课程设计
      数据库课程设计十分完整有需要的请下载啊谢谢
    • 数据库课程设计
      广东工业大学数据库课程设计,可视化界面连接数据库,delphi7
    • 数据库课程设计
      数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述
    • 数据库课程设计
      数据库课程设计》由周爱武、汪海威、肖云编著,遵循数据库课程设计的具体要求,独立于具体的数据库教材,从实际应用系统的需求着手,引导读者逐步完成数据库设计全过程,重点讲解数据库系统的需求分析、概念设计、...
    • 数据库课程设计
      数据库课程设计人事管理系统 数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计...
    • 数据库课程设计
      数据库课程设计,基于visual basic自助银行管理系统,界面很清爽,实用。同学都说好,所以就上传了!!!
    • 数据库课程设计
      数据库课程设计 里面有详细的文档资料 包含数据库一切的图 以及生成的数据库表文件 期末得分为优秀
    • 数据库课程设计
      可以作为数据库课程设计,也可以作为Java的课程设计,内容全面。本资源转载的,非本人原创。用于交流学习,特此申明!
    • 数据库课程设计
      数据库课程设计蓝天大学学生管理系统 2.商店信息管理系统 3.实验室机房收费管理系统 4.图书馆资料检索系统 5.企业库存管理系统 6.仓库管理系统 7.工程项目管理系统 8.教材管理系统 9.企业人事管理系统 10.企业财务...