zoukankan      html  css  js  c++  java
  • touchweb手机网站图片加载方法(canvas加载和延迟加载)

    一、canvas图片加载

    关于canvas加载,我的方法是,将文章中所有用到图片的地方,都用canvas代替,给canvas一个data-src,里面存放img的路径,通过canvas方法渲染图片。因为图片渲染需要时间,一般会给canvas一个背景,背景可以用gif图片。图片渲染好了之后把背景去掉。

    我的canvas代码如下:

    canvasload: function () {
                //canvas加载图片
                var imglength = $("#您的id").find("canvas").length;
                if (imglength > 0) {
                    $("#您的id").find("canvas").each(function () {
                        var imgSrc = $(this).data("src");
                        var imageObj = new Image();
                        imageObj.canvs = $(this)[0];
                        var cvs = imageObj.canvs.getContext('2d');
                        if (cvs) {
                            imageObj.onload = function () {
                                imageObj.canvs.width = this.width;
                                imageObj.canvs.height = this.height;
                                cvs.drawImage(this, 0, 0);
                                $(imageObj.canvs).css("background-image", "none");
                            }
                            imageObj.src = imgSrc;
                        }
                    })
                }
    },

    用法很简单,直接在页面中引用这个函数就可以了,注意,所有canvas外层要包裹一个ID

    二、图片延迟加载

    图片延迟加载方法有很多,下面简单介绍一个,可以引入一个jquery插件。这个插件是一个网友写的,试了一下能用,代码如下:

    ;(function ($) {  
        $.fn.lazyloading = function (options) {  
            var defaults = {  
                preyimg: "/load.gif",  
                picpath: "data-original",  
                container: $(window),  
                loadfirst: false, //进入页面后是否加载当前页面的图片  
                defaultHeightID: "lazyloadingHeight"//页面上默认高度的input标签id  
                //imgPaddingID: "lazyloadingPadding"//img的padding值  
            };  
            var params = $.extend({}, defaults, options || {});  
            params.cache = [];  
            $(this).each(function () {  
                var node = this.nodeName.toLowerCase(), url = $(this).attr(params["picpath"]), preyimg = params["preyimg"];  
                var defaultheight = $("#" + params["defaultHeightID"]).val(); //, padding = $("#" + params["imgPaddingID"]).val(); //  
                //重组  
                var data = {  
                    obj: $(this),  
                    tag: node,  
                    url: url,  
                    preyimg: preyimg,  
                    defaultheight: defaultheight  
                };  
                params.cache.push(data);  
            });  
    
            var init = function () {  
                $.each(params.cache, function (i, data) {  
                    var thisImg = data.obj, tag = data.tag, url = data.url, preyimg = data.preyimg;  
                    if (typeof (url) != "undefined")// 判断是否需要延迟加载  
                    {  
                        var parent1 = thisImg.parent(); //a  
                        var Inner = null; //  
                        if (parent1.is("a") == true) {//img wrap by a  
                            Inner = parent1;  
                        }  
                        else {  
                            Inner = thisImg;  
                        }  
                        var width = thisImg.attr("width") || thisImg.css("width");  
                        var height = data.defaultheight || thisImg.css("height");  
                        //if (i == 0) alert(data.defaultheight);  
                        var attrheight = thisImg.attr("height");  
                        if (attrheight != null) height = attrheight;  
                        if (width != null && width.indexOf("px") > -1) width.replace("px", "");  
                        if (height != null && height.indexOf("px") > -1) height.replace("px", "");  
                        var divstr = "<div class='.loading' style='text-align: left;position:relative;float:left;" + width + "px;";  
                        var HasHeight = true; //图片是否指定了高度  
                        divstr = divstr + "height:" + height + "px;";  
                        if (attrheight == null || attrheight == "") {  
                            HasHeight = false;  
                        }  
    
                        thisImg.css("position", "relative");  
    
                        divstr = divstr + "' ></div>"//修正外层div:text-align的影响  Inner.wrap(divstr);//修正img外面不是a标签时parent()已经改变的问题  
                        parent1 = thisImg.parent();if(HasHeight==true){ parent1.attr("lazyloading_hasheight","1");}//是否指定了高度  else{{ parent1.attr("lazyloading_hasheight","0");}}  
                        parent1.append("<img class='loadhiddenimg' width='0' height='0' style='display:none;' src='' />");  
                        thisImg.attr("src", preyimg);  
                        thisImg.removeAttr("width").removeAttr("height");  
                        thisImg.attr("width1", width).attr("height1", attrheight);////thisImg.attr("width", "50px").attr("height", "50px"); //loading图大小  //thisImg.css("margin", "0 auto");  
                        thisImg.css("margin",((height /2)-25)+"px auto auto "+((width /2)-25)+"px");  
                        $(".lazyloading").css("display","table");//.css("position", "relative");  }});}//动态显示数据  var loading1 =function(){};var loading =function(){//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度  var thisButtomTop = parseInt($(window).height())+ parseInt($(window).scrollTop());var thisTop = parseInt($(window).scrollTop());//屏幕顶部距离最顶部的高度  
    
                $.each(params.cache,function(i, data){var thisImg = data.obj, tag = data.tag, url = data.url, post, posb;if(thisImg){//对象不为空  if(typeof(url)!="undefined"){// 判断是否需要延迟加载  varPictureTop= parseInt(thisImg.offset().top);//如果处理可见范围内,并且原图地址data-original不等于src,则加载图片  if(PictureTop>= thisTop &&PictureTop<= thisButtomTop && thisImg.attr("data-original")!= thisImg.attr("src")){var hiddenImg = thisImg.siblings("img.loadhiddenimg");  
    
                                hiddenImg.load(function(){//隐藏图片加载完之后的回调函数  var width = thisImg.attr("width1");var height = thisImg.attr("height1");  
                                    thisImg.attr("width", width).attr("height", height).removeAttr("width1").removeAttr("height1");  
                                    thisImg.css("margin","0 auto");if(thisImg.parent().attr("lazyloading_hasheight")=="0"){//没有指定高度时,加载图片后去掉div高度自适应  if(thisImg.parent().is("a")==true){  
                                            thisImg.parent().parent().css("height","");}else{  
                                            thisImg.parent().css("height","");}}  
                                    thisImg.load(function(){if(thisImg.parent().is("a")==true){  
                                            thisImg.parent().parent().css("height", thisImg.height());}else{  
                                            thisImg.parent().css("height", thisImg.height());}});  
                                    thisImg.css('opacity','0.2');  
                                    thisImg.attr("src", hiddenImg.attr("src"));  
                                    thisImg.animate({ opacity:1.0});if(thisImg.attr("alt")!=""){  
                                        thisImg.attr("title", thisImg.attr("alt"));  
                                        thisImg.attr("alt","");}}).error(function(){  
                                    thisImg.error(function(){  
                                        thisImg.css("margin","0 auto auto 0");if(thisImg.parent().attr("lazyloading_hasheight")=="0"){//没有指定高度时,加载图片后去掉div高度自适应  if(thisImg.parent().is("a")==true){  
                                                thisImg.parent().parent().css("height","");}else{  
                                                thisImg.parent().css("height","");}}});  
                                    thisImg.attr("src", hiddenImg.attr("src"));//alert("error");  if(thisImg.attr("alt")!=""){  
                                        thisImg.attr("title", thisImg.attr("alt"));  
                                        thisImg.attr("alt","");}});  
                                hiddenImg.attr("src", url);}}}});};//初始化  
            init();//事件触发  //加载完毕即执行  if(params["loadfirst"]==true) loading();//滚动执行  params.container.bind("scroll", loading).bind("resize", loading);};})(jQuery);

    用法很简单:

    <a href="#"><img  alt="haorooms博客" src="" data-original="http://www.haorooms.com/uploads/images/table.gif" class="lazyloading" /></a>
    <script type="text/javascript">
    $(function () {
        $("img.lazyloading").lazyloading({ loadfirst: true });
    })
    
    </script>

    上面就可以完成图片的延迟加载了!

  • 相关阅读:
    如何将网格式报表打印成其它样式
    拥有与实力不相称的脾气是种灾难——北漂18年(23)
    8.8.1 Optimizing Queries with EXPLAIN
    mysql 没有rowid 怎么实现根据rowid回表呢?
    secondary index
    8.5.5 Bulk Data Loading for InnoDB Tables 批量数据加载
    mysql 中key 指的是索引
    8.5.4 Optimizing InnoDB Redo Logging 优化InnoDB Redo 日志
    8.5.3 Optimizing InnoDB Read-Only Transactions 优化InnoDB 只读事务
    8.5.1 Optimizing Storage Layout for InnoDB Tables InnoDB表的存储布局优化
  • 原文地址:https://www.cnblogs.com/qiaoxinming/p/6591376.html
Copyright © 2011-2022 走看看