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:" + 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>
上面就可以完成图片的延迟加载了!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee