jquery 全屏轮播图时，不能获取到图片的真实宽度？

来源：蜘蛛抓取(WebSpider) 时间：2017-10-07 12:27 标签： jquery全屏轮播图代码
在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想写一个图片预览的功能，主要是点击页面一个小图片，然后在背景是黑色的蒙版下根据图片宽高全屏居中显示。但是出现有很大的概率取不到图片宽高，导致黑色蒙版下什么都没有。我查了资料说是图片没加载完之前取不到。我也上网查了一下两种方法，可是并没有用这是我要添加图片的代码
var node = $( '&img src="' + picUrl + '" alt="图片" class="yulan-image" id="yulan-image"&');
$('body').append(node);
接下来是我在网上找的两种解决方案1、
var img = new Image();
img.src = picU//事先准备好的图片地址
while(true) {
console.plete);
console.log('进来while了');
$thisYulan.changeSize(); //调用调整显示图片位置的函数
$('body').load(node,function() {
console.log('进来了');
$thisYulan.changeSize();
var img = document.getElementById('yulan-image');
img.onload = function() {
$thisYulan.changeSize();
console.log('终于进来了');
这三种方法只有第三种能调用 $thisYulan.changeSize()函数，为什么前两种不行呢？谁能帮忙告诉我一下
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用死循环也是醉了。。。
$('&img /&')
.attr('src', picUrl)
.attr('id', 'preview-image') //yulan-image就别用啦 ?
.addClass('preview-image')
.load(function() {
var width = this. //你要的宽
var height = this. //你要的高
$(document.body).append(this); //直接插入网页
//如果你还要对这个元素进行一些位置方面的调整，在这里进行
更新，刚理解错了，原来你的问题是问另外两个为什么不行
没啥好说的，会卡死你的浏览器，直接就枪毙了
你要监听的是image的onload事件，关body什么事
本质上就是我这段代码，只是这是用原生的，不过实话说这个写法很微妙。如果真要用原生，建议用addEventListener添加事件（IE早期版本用attachEvent）
总之这个事情的原理很简单，就是监听image的onload事件，图像加载完之后会触发那段代码
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：& 以前的网站带宽小，没有特别多的大图，现在不同了，各种图片网站如同雨后春笋层出不穷。服务器是抗住了，但是客户端就有意见了，太多的图片必然导致页面加载缓慢，特别是有些table结构的站点更是如此。能否让图片在页面加载完成后再加载？我想这是大多数站点管理员都很关心的问题，现如今图片延迟加载技术已经不是什么稀罕东西了，尤其是的普及想要写个简易的延迟加载的代码那是信手拈来。
&&&&&&&&我们都知道一般的img标签都有个src的属性，浏览器在解析img标签的时候就会读取src属性的值，并从值所指向的地址获取到图片。如果我们在写img标签的时候图片地址不写在src属性上而是写在data-original上这样浏览器就不会去图片地址上获取图片了。当我们需要加载这张图片的时候，我们偷梁换柱将data-original属性换成src属性不就大功告成了。
&&&&&&&&以上是思路，下面我们开始行动。
&img data-original="http://www./zb_users/upload/.jpg"&
$(function(){
$("img").each(function(i,n){
var img_path = $(n).attr("data-original");
$(n).attr("src",img_path);
&&&&&&&&这是最原始的延迟加载，因为我们都知道这段会在页面加载完成后再执行，也就是说用户在看到图片前就已经可以操作页面了，从而不会影响用户的使用。但是这段代码无法满足用户多样的需求，比如说有人想在页面加载真正图片前显示一张默认图片，例如加载中的gif图片。
&&&&&&&&还有的图片在页面的可视范围的下方，只有用户滚动到一定高度的时候才会显示出来，这样的图片就没必要在页面加载的时候就显示出来，我们也可以通过插件来实现。这个时候就不是三言两语就能做到的，我们可以自己动手写个来完成我们的工作。
下面就亲手奉上我自己写的插件jquery.lazyload.js
阅读(...) 评论()

我要回帖

更多关于 jquery全屏轮播图代码 的文章

 

随机推荐