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 (

转载于:https://www.cnblogs.com/qiaoxinming/p/6591376.html