请教一个JS的问题。

xbslei 2011-11-15 10:09:26

我的这个网站用到了jquery的延时加载和等比例缩放图片，但是第一次打开页面的时候，等比例缩放好象不行，刷新下才可以执行，不知道是哪里出了问题，求高手指教。网址的链接：http://www.uotoc.com/product/jindan/

...全文

235 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

yibey 2011-11-17

打赏
举报

对啊干嘛一定要用哪个啊

xbslei 2011-11-17

打赏
举报

[Quote=引用 11 楼 yibey 的回复:]

这个东西的效果就是当图片未加载完成的时候先显示loading这个图片，然后当图片加载结束后loading这个图片标签被隐藏了。
如果是动态添加图片的话，那么请按照这个样子拼接好HTML就可以了
[/Quote]
好像你没有用到lazyload。

xbslei 2011-11-16

打赏
举报

jQuery.fn.ImageAutoSize = function(width,height)
{
$("img",this).each(function()
{
var image = $(this);
if(image.width()>image.height())
{
if(image.width()>width)
{
image.width(width);
image.height(width/image.width()*image.height());
}
if(image.height()>height)
{
image.height(height);
image.width(height/image.height()*image.width());
}
}
else
{
if(image.height()>height)
{
image.height(height);
image.width(height/image.height()*image.width());
}
if(image.width()>width)
{
image.width(width);
image.height(width/image.width()*image.height());
}
}
});
}
$(document).ready(function(){
//$("#contant2").ImageAutoSize(166,166);
//$(".list_x").ImageAutoSize(166,166);
$("img").lazyload({
//placeholder : "jd_pic/grey.gif",
effect:"leiresizeimg"
});
});

function leiresizeimg()
{
$("#contant2").ImageAutoSize(166,166);
$(".list_x").ImageAutoSize(166,166);
}

现在图片有些加载不了。

yibey 2011-11-16

打赏
举报

这个东西的效果就是当图片未加载完成的时候先显示loading这个图片，然后当图片加载结束后loading这个图片标签被隐藏了。
如果是动态添加图片的话，那么请按照这个样子拼接好HTML就可以了

yibey 2011-11-16

打赏
举报



<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery-1.4.js"></script>

    <script type="text/javascript">



        initialMediaShow = function (w, h, currentImage) {

            var imgSize = getImageListThumbSizeAfterLoading(w, h, currentImage);

            currentImage.css({ width: imgSize.width + 'px', height: imgSize.height + 'px', top: (imgSize.displayH - imgSize.height) / 2 + 'px', left: (imgSize.displayW - imgSize.width) / 2 + 'px' });



        };

        getImageListThumbSizeAfterLoading = function (w, h, currentImage) {



            var size = {

                width: 0,

                height: 0,

                displayW: 0,

                displayH: 0,

                flag: 'none'

            };

            var imageObj = new Image();

            imageObj.src = currentImage.attr('src');

            if (imageObj.width / imageObj.height < w / h) {

                size.basis = 'height';

                size.height = h;

                size.width = (h / imageObj.height) * imageObj.width;

                size.displayW = w;

                size.displayH = h;



            }

            else {

                size.basis = 'width';

                size.width = w;

                size.height = (w / imageObj.width) * imageObj.height;

                size.displayW = w;

                size.displayH = h;



            }



            return size;



        };





    </script>

</head>

<body>

    <img class="list-img list-img-over" src="a.gif" onload="var currentImage = $(this);initialMediaShow(150,160,currentImage); this.nextSibling.style.display=\'none\';this.style.display =\'\';" />

    <div style="position: relative;">

        <img style="position: relative; left: 59px; top: 64px" src="loading.gif">

    </div>

    '

</body>

</html>

这里可能会由些语法问题因为这是以前写的东西了
提几点，1initialMediaShow 这个函数的前2个参数代表你需要放置图片的容器大小，也就是我们要对图片按这个比例放大缩小。

xbslei 2011-11-16

打赏
举报

加分了，希望高手给个解决方案。

xbslei 2011-11-15

打赏
举报

[Quote=引用 3 楼 zswang 的回复:]

图片加载时需要时间的，如果已经打开过会被浏览器缓存

JScript code
jQuery.fn.ImageAutoSize = function(width,height)
{
$("img",this).each(function()
{
var image……
[/Quote]

好的，我先自己看看，可能还会请教您。

xbslei 2011-11-15

打赏
举报

[Quote=引用 2 楼 zsx841021 的回复:]

打广告吗？如果是请自重。。。
我刷新下和以前也没区别啊。。。
[/Quote]
我觉得没有必要那么敏感。

xbslei 2011-11-15

打赏
举报

加载真的有问题

王集鹄 2011-11-15

打赏
举报

图片加载时需要时间的，如果已经打开过会被浏览器缓存

jQuery.fn.ImageAutoSize = function(width,height)

			{

			    $("img",this).each(function()

			    {

			        var image = $(this);

					if(image.width()>image.height())

。。。。

这里第一次由于图片未加载完毕，所以width是不能获取到的。
可以监听img的load事件，再进行缩放操作。