Maison> php教程> PHP开发> le corps du texte

jQuery图片加载显示loading效果

高洛峰
Libérer: 2017-03-30 14:55:01
original
2113 Les gens l'ont consulté

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图:

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

页面引用

Copier après la connexion

下面是插件脚本,为了突出加载的效果就加上了延迟时间。

;(function ($) { $.fn.extend({ ImgLoading: function (options) { var defaults = { errorimg: "http://www.oyly.net/Images/default/Journey/journeydetail.png", loadimg: "http://www1.ytedu.cn/cnet/dynamic/presentation/net_23/images/loading.gif", Node: $(this).find("img"), timeout: 1000 }; var options = $.extend(defaults, options); var Browser = new Object(); var plus = { BrowserVerify:function(){ Browser.userAgent = window.navigator.userAgent.toLowerCase(); Browser.ie = /msie/.test(Browser.userAgent); Browser.Moz = /gecko/.test(Browser.userAgent); }, EachImg: function () { defaults.Node.each(function (i) { var img = defaults.Node.eq(i); plus.LoadEnd(Browser, img.attr("imgurl"), i, plus.LoadImg); }) }, LoadState:function(){ defaults.Node.each(function (i) { var img = defaults.Node.eq(i); var url = img.attr("src"); img.attr("imgurl", url); img.attr("src",defaults.loadimg); }) }, LoadEnd: function (Browser, url, imgindex, callback) { var val = url; var img = new Image(); if (Browser.ie) { img.onreadystatechange = function () { if (img.readyState == "complete" || img.readyState == "loaded") { callback(img, imgindex); } } } else if (Browser.Moz) { img.onload = function () { if (img.complete == true) { callback(img, imgindex); } } } img.onerror = function () { img.src = defaults.errorimg } img.src = val; }, LoadImg: function (obj, imgindex) { setTimeout(function () { defaults.Node.eq(imgindex).attr("src", obj.src); }, defaults.timeout); } } plus.LoadState(); plus.BrowserVerify(); plus.EachImg(); } }); })(jQuery);
Copier après la connexion

以上就是jQuery图片加载显示loading效果的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!