这篇文章介绍了,JS 图片根据鼠标滚动延时加载的实例代码,有需要的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近研究了京东商城用 jQuery 的实现如下:
就是默认地址赋给 img 标签的 src2 属性,显示时赋给 src 属性值。
- function lazyload(option) {
- var settings = {
- defObj: null,
- defHeight: 0
- };
- settings = $.extend(settings, option || {});
- var defHeight = settings.defHeight;
- var defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img");
- var pageTop = function() {
- return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - settings.defHeight;
- };
- var imgLoad = function() {
- defObj.each(function() {
- if ($(this).offset().top <= pageTop()) {
- var src2 = $(this).attr("src2");
- //已显示的不用再显示
- if (src2) {
- //显示后,去掉src2属性
- $(this).attr("src", src2).removeAttr("src2");
- }
- }
- });
- };
- imgLoad();
- $(window).bind("scroll", function() {
- imgLoad();
- });
- }
- lazyload({
- defObj:".w1"
- });
来源: