zoukankan html css js c++ java

简易版图片预加载效果

图片预加载效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片预加载的简单效果</title>
<style>
body{ font-size:14px; }
ul{ width:500px; height:auto; padding:0px; margin:0px; margin:0 auto;}
ul li{ float:left; margin:10px; width:200px; list-style:none; height:300px;}
ul li img{ width:200px; height:300px;}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script src="lazyLoad.js"></script>
</head>

<body>
<ul>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/5.jpg" alt="" /></a></li>
    <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li>
</ul>　　
</body>
</html>

js代码

(function($,window,document,undefined){                
    function LazyLoad(ele,opt){
        this.$ele = ele;
        this.defaults = {
            'efect':'fade'
        }
        this.settings = $.extend({},this.defaults,opt);
    }
    LazyLoad.prototype = {
        'init':function(){
            this.lazyImg();
            this.scr();
        },
        'lazyImg':function(){
            var _this = this;
            return this.$ele.each(function(index, element) {
                if($(this).data('btn')) return;
                var iH = $(window).scrollTop() + $(window).innerHeight();
                //alert(iH);
                var objImg = new Image();
                
                var That = $(this);                    
          
                objImg.src = $(this).attr('data-src');
            
                if(($(this).offset().top + $(this).height())<iH){        
                    if(_this.settings.efect=='fade'){
                        $(this).css('opacity',0);
                        
                      
            
                        $(this).attr('src',$(this).attr('data-src'));
                        $(this).fadeTo('fast',1);
                    }else{
                        
      
            
                        $(this).attr('src',$(this).attr('data-src'));
                    }    
                    $(this).data('btn','true')
                }
            });
        },
        'scr':function(){
            var _this = this;
            $(window).on('scroll',function(){            
                _this.lazyImg();                    
            });
        }        
    }
    $.fn.lazyload = function(options){
        var lazyLoad = new LazyLoad(this,options);
        return lazyLoad.init();
    }
})(jQuery,window,document);

代码调用

$(function(){
        $('li img').lazyload({
            'efect':'fade'//只实现了预加载的效果 图片渐渐显示出来的
        });
    });

查看全文

相关阅读:
C# 数组
 一个遍历算法
 php csv导出
 linux 配置 crontab
LINUX 配置SVN
Linux chkconfig命令
 Linux　安装mysql+apache+php
linux 安装samba
linux安装软件的学习
 LINUX中简单的字符命令

原文地址：https://www.cnblogs.com/senhero/p/4032954.html