Heim > Backend-Entwicklung > PHP-Tutorial > 很像知道这种平缓出现图片的效果是如何做的

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

WBOY
Freigeben: 2016-06-13 10:52:30
Original
964 Leute haben es durchsucht

很像知道这种平缓出现图片的效果是怎么做的
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下载下来了,多的可怕!唉。。。希望楼上详细说下

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage