在ember中使用图像标签上的Onload [英] Use Onload on image tag in ember

问题描述

我有一个模板，其中照片被显示在一个框架中（每个框架对于不同的图像是不同的）。我已经编写了一个使用图像原始高度和宽度的功能，并给出了特定框架的自定义宽度和高度为了恢复宽高比，现在我已经通过onload调用了这个功能，因为这个特定时刻的图像被加载。

我的feed.hbs（template）

 < img src ={{photo.0.photo_url}}onload =OnImageLoad（event）; {{actionimgOverlay0photo}} /> 
  

功能

  function OnImageLoad（evt）{
 
 var img = evt.currentTarget; 
 
 //这个图片的大小是多少，而且是父
 var w = $（img）.width（）; 
 var h = $（img）.height（）; 
 var tw = $（img）.parent（）。width（）; 
 var th = $（img）.parent（）。height（）; 
 
 //计算新的大小和偏移量
 var result = scaling（w，h，tw，th，false）; 
 
 //调整图像坐标和大小
 img.width = result.width; 
 img.height = result.height; 
 $（img）.css（margin-left，result.targetleft）; 
 $（img）.css（margin-top，result.targettop）; 
 // console.log（result，result）
 return result; 
} 
 
函数缩放（w，h，tw，th，false）{
 //数据操作
  

}

但是，由于我将功能文件保存在bower_compontent.W如何将其包含在我的ember应用程序中？

解决方案

将这个javascript文件放在 vendor 目录，因为通常 bower_components 包含在 .gitignore 中。

说你把这段代码放在 vendor / file-onload.js 中。

然后在中进行导入ember-cli-build.js

  app.import（ '销售商/文件onload.js'）; 
  

如果将这些函数放在相应的 feed 控制器。

I have a template in which photos are being displayed in a frame ( each frame is different for different images) .I have written a function which uses the images original height and width and gives me customized width and height for that particular frame inorder to restore the aspect ratio.Now I have called that function through onload as images loads on that particular moment.

My feed.hbs( template)

<img src = "{{photo.0.photo_url}}" onload = "OnImageLoad(event);" {{action "imgOverlay0" photo}}/>

Function

function OnImageLoad(evt) {

    var img = evt.currentTarget;

    // what's the size of this image and it's parent
    var w = $(img).width();
    var h = $(img).height();
    var tw = $(img).parent().width();
    var th = $(img).parent().height();

    // compute the new size and offsets
    var result = scaling(w, h, tw, th,false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    $(img).css("margin-left", result.targetleft);
    $(img).css("margin-top", result.targettop);
    // console.log("result",result)
    return result;
}

function scaling (w, h, tw, th,false){
   //manipulation with data 

}

But it will not be included in the build of ember as I have kept the function file in bower_compontent.How do I include it in my ember app ?

解决方案

It will be better to put this javascript file in vendor directory because normally bower_components is included in .gitignore.

Say you put this code in vendor/file-onload.js.

Then do a import in ember-cli-build.js

app.import('vendor/file-onload.js');

It will be even easier if you put these functions in corresponding feed controller.

这篇关于在ember中使用图像标签上的Onload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！