nopcommerce开源框架技术总结-图片延迟加载

这是我园子里的第一篇文章，我做了这框架已经半年多了，从2.65-2.80我都开发过，这期间的版本也都比较了解，现在我和园子里的同行分享我的心得。废话不多说那就开始今天的工作吧。

如何在nop项目中添加图片的延迟加载

1.Scripts目录里面增加jquery.lazyload.min.js的jq文件

2.对js文件的引用：Html.AppendScriptParts(@Url.Content( "~/Scripts/jquery.lazyload.min.js" ));

3.添加ImageExtensions类，里面有2个主要方法

   一.LazyImg,参数：src:对应<img>标签的src 属性；htmlAttributes:对应<img>标签的其他属性,比如 new{id='img_lazy'},就生成<img id="img_lazy" 。。。>

   public static MvcHtmlString LazyImg(this HtmlHelper htmlHelper, string src, object htmlAttributes=null)
  {
          IDictionary<string, object> htmlAttributesDict = ((IDictionary<string, object>)HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
         return ImgHelper(htmlHelper, src, "/Content/images/loadding.gif", null, null, true, htmlAttributesDict);
  }

而真正返回MvcHtmlString 的是ImgHelper方法：

private static MvcHtmlString ImgHelper(HtmlHelper htmlHelper, string Src, string holdPostionSrc, ModelMetadata metadata, string name, bool setId, IDictionary<string, object> htmlAttributes)
{
ModelState state;
string fullHtmlFieldName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
if (string.IsNullOrEmpty(fullHtmlFieldName))
{
throw new ArgumentException("Name Error!", "name");
}
TagBuilder tagBuilder = new TagBuilder("img");
tagBuilder.MergeAttributes<string, object>(htmlAttributes);
tagBuilder.MergeAttribute("name", fullHtmlFieldName, true);
tagBuilder.MergeAttribute("data-original", Src);
tagBuilder.MergeAttribute("src", holdPostionSrc);

if (setId)
{
tagBuilder.GenerateId(fullHtmlFieldName);
}
if (htmlHelper.ViewData.ModelState.TryGetValue(fullHtmlFieldName, out state) && (state.Errors.Count > 0))
{
tagBuilder.AddCssClass(HtmlHelper.ValidationInputCssClassName);
}

tagBuilder.MergeAttributes<string, object>(htmlHelper.GetUnobtrusiveValidationAttributes(name, metadata));
return new MvcHtmlString(tagBuilder.ToString(TagRenderMode.SelfClosing));

}

二.第二个方法是LazyLoadImg，有1个重载和LazyLoadImgFor。

public static MvcHtmlString LazyLoadImg(this HtmlHelper helper, string Src)
        {
            IDictionary<string, object> htmlAttributesDict = ((IDictionary<string, object>)HtmlHelper.AnonymousObjectToHtmlAttributes(null));
            return LazyLoadImg(helper, Src, htmlAttributesDict);
        }

        public static MvcHtmlString LazyLoadImg(this HtmlHelper helper, string Src, object htmlAttributes = null)
        {
            IDictionary<string, object> htmlAttributesDict = ((IDictionary<string, object>)HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
            // Create tag builder
            var builder = new TagBuilder("img");
            builder.MergeAttributes<string, object>(htmlAttributesDict);
            builder.MergeAttribute("data-original", Src);
            builder.MergeAttribute("src", "/Content/images/loadding.gif");
            return new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing));
        }

 public static MvcHtmlString LazyImgFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, string>> expression, object htmlAttributes=null)
        {
            IDictionary<string, object> htmlAttributesDict = ((IDictionary<string, object>)HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression<TModel, string>(expression, htmlHelper.ViewData);
            string Src = null;
            if ((metadata.Model != null)  )
            {
                Src = metadata.Model.ToString();
            }
            return ImgHelper(htmlHelper, Src, "/Content/images/loadding.gif", metadata, ExpressionHelper.GetExpressionText(expression), true, htmlAttributesDict);
        }

　　

　4.页面中增加jquery脚本函数

 <Script type="text/javascript">
    $(document).ready(function () {
        $('img').lazyload({ effect: "fadeIn", threshold : 200  });      
    });
</Script>

　　注意，我们这里这个写法是把页面中的所有<img>标签都进行了LazyLoad处理，当然，如果没有使用LazyImg和LazyImgFor函数生成的<img>标签实际上是不支持Lazyload的，他们会在页面加载时同步加载。上面代码中的两个参数，effect是效果，threshold是触发LazyLoad的限值，两者都可以省略

5.对于需要进行lazyload处理的图片，在Razor脚本中作如下处理：

 

 @ Html.LazyImgFor(m => item.Picture.ImageUrl, new { title = item.Picture.Title, alt = item.Picture.AlternateText ,height="40" })

 注意，这里如果LazyLoad图片出现在首屏中，一定要给定height 或者width中的至少一个属性，且不能为auto ，否则，Lazyload函数无法确定图片的实际宽度，在首屏的时候，就不能自动加载视野范围内的Lazyload图片，只有滚动一下才能触发首次加载

大功告成，去试试吧。