页面延迟加载,即分屏显示,用户滚动页面,切换页面时显示当前屏幕的图片
原理:将img的地址暂时存在一个属性中,如data-original,而让src为空,等到鼠标滚动的时候,响应一个事件($(this).trigger('appear');),此时会把data-original中的地址取出来,放入src
1:引入jquery.lazyload.js,该js最好放在页面的最下面
2:给img添加延迟属性
如:<img class="lazy" src="/images/loading.gif" data-original="<s:property value="#prodList.picURL"/>" width="178" height="190" title="<s:property value="prodName" escape="false"/>"/>
其中:data-original为暂时存放图片地址的属性,src可以为空,或者用其它图片代替
3:添加延迟加载
$(function(){
$("img.lazy").lazyload();
});
特殊情况:如多个菜单切换的时候,延时加载无效,因为jquery.lazyload.js只做了srcoll时才加载,此时可以自定义一个js,切换时响应如下js即可
菜单切换:
$("#prod"+position1+"_"+position2).find('img.lazy').each(
function(){
$(this).trigger('appear');
}
);
点击切换:
function loadSlidImage(){
$("img[name='slide']").each(function(){
if(this.src.indexOf("loading.gif")>-1){
$(this).trigger("appear");
}
});
}
分享到:
相关推荐
FFMPEG实现的分屏显示,分屏不是均等分屏,做上角的分屏区域最大。
这是在VS中用FFMPEG滤镜实现的分屏显示,是平方数分屏,C++开发。
实现wpf分屏显示,指定程序显示在多个屏幕的哪个屏幕上 实现wpf分屏显示,指定程序显示在多个屏幕的哪个屏幕上 v实现wpf分屏显示实现wpf分屏显示,指定程序显示在多个屏幕的哪个屏幕上,指定程序显示在多个屏幕的...
该Demo实现了,Android环境下的工控机连接多块显示屏之后的分屏显示。
delphi开发的分屏显示。可以供大家参考
花生分屏(电脑分屏显示软件)支持划分屏幕时能够确保主屏与分屏的独立性,可用鼠标移动程序从某个分屏到另一个分屏,还了确保程序意外移动到其他分屏,你还能锁定屏幕,另外花生分屏软件眼分屏样式多样,可供用户随意...
一个大神写的jQuery滚动加载插件scrollLoading测试很好用。
打开软件就可以分屏显示电脑中的内容,一个页面可以打开4个电脑中的目录。开发的时候非常方便!
vue直播分屏页面前段
NULL 博文链接:https://zzshengbo.iteye.com/blog/855499
如果你有两个屏幕,要让两个屏幕都显示菜单栏的话 可以用
3D显示图片,flash制作的,简单添加图片,挺好看的
c++实现将窗体移动到扩展显示器,默认系统设置主窗口在最左边,扩展窗口在右侧。需一定的基础,小白请不要下载,以免浪费。
用于多个显示器的分屏控制源代码
分屏显示图片跟描述是一款默认为图片自动切换样式,鼠标移到图片上会自动切换成双屏样式,左侧显示描述,右侧显示图片,效果很赞,站长素材推荐下载。
win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏工具win7分屏...
开发环境VS2010+,开发语音C#,如果对于分屏或者说对于数据多屏显示需要的用户可以下载,类似于MES产线设备看板系统的框架;多屏显示,也类似于监控系统多屏显示。有兴趣的,或者以后有需要的可以先收集下。
android9.0实现分屏方案
行业资料-电子功用-分屏显示方法、装置及具有分屏显示功能的电子设备的介绍分析.rar
视频分屏页面效果 可分1、4、6、8、9、10、16、24、32块视频 页面打开直接看效果