关于手机网站的图片加载，canvas方法加载图片，占用内存最小，效果最佳，关于canvas图片加载，我之前的一篇文章中提几个。具体请看手机网站几点注意的问题。当然，这些都是很久之前整理的，有些地方写的可能有点问题，例如zeptiojs了等等。

一、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:" + 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") {// 判断是否需要延迟加载 var PictureTop = 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);