> 백엔드 개발 > PHP 튜토리얼 > 很像知道这种平缓出现图片的效果是如何做的

很像知道这种平缓出现图片的效果是如何做的

WBOY
풀어 주다: 2016-06-13 10:52:30
원래의
964명이 탐색했습니다.

很像知道这种平缓出现图片的效果是怎么做的
http://down.chinaz.com/class/55_1.htm
上面的网站中 图片只有在出现的时候才加载 显示出来的效果是平滑过渡

怎么实现?

另外从效率方面 直接显示效率高 还是这种方式效率高

------解决方案--------------------
这个是 图片延时加载的效果,避免页面初始加载时过多的http连接请求而导致页面加载缓慢。


楼主搜下 lazyload
------解决方案--------------------
就这个网站来说,默认img标签都是grep.jpg这个图片,一个灰色底片,由于一开始进入页面都是这一个URL,所以下载一次缓存了就省流量了。

其他的都是scroll事件滚动触发的,作者把很像知道这种平缓出现图片的效果是如何做的标签里加了个original属性记录真实的图片URL,当图片滚到视野中就把original设置给src,于是开始下载图片了。

楼主可以把代码直接拿走看看,都是jq写的,网上js代码很多,不复杂。 它只是每次滚动遍历某个class的标签,看看它们是否在屏幕内罢了,在就换一下src。

http://down.chinaz.com/js/imgload.js 这个网站的lazyload JS
------解决方案--------------------
很炫的效果,但是,似乎我不知道该如何具体地应用,JS下载下来了,多的可怕!唉。。。希望楼上详细说下

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿