Warning: date(): Invalid date.timezone value 'HKT', we selected the timezone 'UTC' for now. in /home/mrgcom/public_html/catalog/controller/common/footer.php on line 48 图片内部放大镜

The One 专一

图片内部放大镜

jquery放大镜插件

推荐magnifier

内部放大镜推荐jquery.zoomtoo

不过需要注意的是,图片放大镜的函数需要等图片加载完成后执行.

这有几个函数需要使用到.

$(document).ready(fn) 网页本身html载入后执行

$(window).load(fn) 网页标签图片等载入完后执行

在使用jquery.zoomtoo的使用需要使用$(window).load(fn)函数来执行,因为放大镜如果没有设置高度可能会有BUG出现.

判断图片完成加载的函数.

<body>
    <img id="img1" src="jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        function imgLoad(img, callback) {
            var timer = setInterval(function() {
                if (img.complete) {
                    callback(img)
                    clearInterval(timer)
                }
            }, 50)
        }
        imgLoad(img1, function() {
            p1.innerHTML('加载完毕')
        })
    </script>
</body>
这里img.complete属性可以判断图片是否加载完成.这里需要配合循环函数使用.因为javascript是单线程运算,没有通过循环函数检查的话,是无法使用img.complete



Powered By 爱你若晴天
身体健康 © 2017 粤ICP备14081548号-1

Article

Shopping

Search

Me